Question

在解释问题之前，我将解释我的要求以及我选择创建此自定义组件的原因。

我有一个要求，即每当用户在textarea中输入内容时，textarea的高度应根据输入的文本自动增加/减少。

因为，textarea会在内容增加时添加滚动条但不会自动拉伸。我想使用contenteditable div而不是textarea。但是，可疑的div在手机中存在问题，我们无法点击输入的文本。

所以，我创建了一个自定义组件，无论我在textarea中添加什么，相同的内容都将添加到隐藏的div中。然后textarea将取出隐藏div的高度。这很好。

但是我遇到一个小问题，即每当用户按下“enter”时，该组件就无法调整textarea的高度。然后，如果我按任何字母，textarea正在调整。问题是只检测在内容结尾处按下的“Enter”键（如果用户在内容中间按下“Enter”键，则此组件正常工作）。

以下是组件的HTML代码：

<div class="wrapper">
    <div class="textarea-clone"></div>
    <textarea></textarea>
</div>

Answer 1

尝试这样的事情......

$('textarea').on('keyup', function (e) {
    if(code == 13) {  // keycode == 13 (enter)
        $('.textarea-clone').text($(this).val());
    }
});

编辑：

这对我有用，只有在输入按键时调整大小，考虑到它可能不是你的意图，但是这会测试特定情况。

也许这是一个浏览器的东西，有些浏览器没有正确地实现所有事件，也许尝试附加到change，keypress和keydown，试验并看看你得到了什么。

Answer 2

扩展我的评论以包含溢出行：

<textarea id=ta></textarea>

ta.oninput=function(){
    this.rows=this.value.split("\n").length; 
    while(this.clientHeight < this.scrollHeight-2) this.rows=this.rows+1;
};

这是一个很好的设置，因为它可以调整为粘贴，长文本，输入键以及其他任何需要更高的值。

我认为您可能需要调整边框+填充分配。 2px默认为小提琴（0px填充+ 1px每个边框）并且工作正常。

强制性小提琴：http://jsfiddle.net/aqfkqc8y/6/

检测“输入”键并绘制textarea组件

2 个答案: