原生js实现textarea高度自适应效果代码

代码语言:html

所属分类:表单美化

代码描述:原生js实现textarea高度自适应效果代码

代码标签: textarea 高度 适应 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>textarea高度自适应,不依赖任何第三方插件</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .box {
            margin: 50px auto;
            border: 1px solid red;
            width: 600px;
            min-height: 300px;
            padding: 10px;
        }
        textarea {
            padding: 5px;
            width: 30%
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>只关心逻辑不关心样式的文本框高度自定义</h2>
        <br>

        <textarea data-allow="no-allow" placeholder="高度不变"></textarea>
        <textarea placeholder="高度自适应"></textarea>
        <textarea placeholder="高度自适应"></textarea>
    </div>
    <script type="text/javascript" charset="utf-8">
        void function() {
            function DiyArea(el) {
                this.el = el || {}
                this.config = {
                    el: document.querySelectorAl.........完整代码请登录后点击上方下载按钮下载查看

网友评论0