使文本输入在键入时自动调整大小

Question

我希望在用户键入多于一行时自动调整文本输入。

我试过使用 html5 contenteditable 但是获取数据太复杂了。（此解决方案对我不起作用 Extracting text from a contentEditable div 并且还有此警告“如果浏览器更改其实现 contentEditable 的方式，对任何浏览器的更新也可能会破坏此功能。”）

我也试过 this plugin 但我不知道如何更新文本区域内容。输入后如果我正在检查 $('textarea').html() 我得到空值。

编辑：基本上，对我来说最重要的是在用户按下回车键时换行。

Answer 1

要访问您要使用的 <textarea>s 值

$('textarea').val()

它应该也适用于您的插件。

Answer 2

您可以编写自己的插件来自动调整文本区域的大小。试试这个片段：

$(document).ready(function() {
 $('.txt').on('keyup', function(event) {
     var textareaElm = event.target;
        if (textareaElm.scrollHeight > textareaElm.clientHeight) {
            textareaElm.style.height = textareaElm.scrollHeight + "px";
        }
 });
})

.txt {
 width: 200px;
 height: 50px;
 transition: height 0.2s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea class="txt"></textarea>

这是相同的 jsfiddle：http://jsfiddle.net/t1cg7f20/

此示例使用 jQuery。如果您需要仅 JS 的解决方案，请告诉我。

Answer 3

感谢@Praveen Singh，我正在使用他的代码来自动调整大小：

$(document).ready(function() {
$('.txt').on('keyup', function(event) {
    var textareaElm = event.target;
    if (textareaElm.scrollHeight > textareaElm.clientHeight) {
        textareaElm.style.height = textareaElm.scrollHeight + "px";
    }
});

})

.txt {
width: 200px;
height: 50px;
transition: height 0.2s linear;

}

和replace(/\n\r?/g, '<br />')显示换行符。

使文本输入在键入时自动调整大小

make text input autoresize as typing

html

jquery

textarea