问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

textarea默认rows为1，只是一行，随内容增加，最大rows为n，怎么实现

头像
cdcccc
    24745574

    textarea默认rows为1，只是一行，随内容增加，最大rows为n，怎么实现

    textareahtml
    阅读 10k
    3 个回答
    得票最新
    头像
    yszou
      4.9k2718
        <div contenteditable="true" style="min-height: 20px; width: 400px; background-color: gray;"></div>
      头像
      陌路凡歌
        7.9k21119

        style.css

        .flex-text-wrap {
    position: relative;
    *zoom: 1;
}
.wrap {
    width: 300px;
    height: 300px;
}
textarea,
.flex-text-wrap {
    outline: 0;
    margin: 0;
    border: none;
    padding: 0;
    *padding-bottom: 0 !important;
}
textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}

.flex-text-wrap textarea,
.flex-text-wrap pre {
    white-space: pre-wrap;
    width: 100%;
    box-sizing: border-box;
    *white-space: pre;
    *word-wrap: break-word;
     word-wrap: break-word;
}

.flex-text-wrap textarea {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    resize: none;
    *height: 94%;
    *width: 94%;
}

.flex-text-wrap pre {
    display: block;
    visibility: hidden;
}

textarea,
.flex-text-wrap pre {
    background-clip: padding-box;
    transition-duration: 300ms;
    transition-easing: ease-in-out;
    transition-property: border-color, box-shadow;
    padding: 10px;
}

        html

        <!doctype html>
<html lang="en-gb">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            border:1px solid #ddd;
            
        }
    </style>
</head>
<body>
    <div class="wrap">
        <textarea id="content"></textarea>
    </div>
        
    <script src="../jquery-2.1.0.js"></script>
    <script src="jquery.flexText.js"></script>
    <script>
        $(function () {
            $('#content ').flexText();
        });
    </script>
</body>
</html>

        js

        (function ($) {

    // Constructor
    function FT(elem) {
        this.$textarea = $(elem);

        this._init();
    }

    FT.prototype = {
        _init: function () {
            var _this = this;
            this.$textarea.wrap('<div class="flex-text-wrap" />').before('<pre><span /><br /></pre>');
            this.$span = this.$textarea.prev().find('span');
            this.$textarea.on('input propertychange keyup change', function () {
                _this._mirror();
            });
            $.valHooks.textarea = {
                get: function (elem) {
                    return elem.value.replace(/\r?\n/g, "\r\n");
                }
            };
            this._mirror();
        }
        ,_mirror: function () {
            this.$span.text(this.$textarea.val());
        }
    };
    $.fn.flexText = function () {
        return this.each(function () {
            if (!$.data(this, 'flexText')) {
                $.data(this, 'flexText', new FT(this));
            }
        });
    };

})(jQuery);
        头像
        月影
          2.7k1724

          谢邀！题外话：提问的时候贴出代码说出你的思路、不要直接提需求拿代码。不培养伸手党

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏