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

Detect "Enter" key and paint the textarea component

本文关键字：textarea 组件 绘制 输入 检测      更新时间：2023-09-26

在解释这个问题之前，我将解释我的需求以及为什么选择创建这个自定义组件。

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

由于，当内容增加但不自动拉伸时，textarea会添加滚动条。我想使用contenteditablediv而不是textarea。但是contenteditablediv在手机中有一个问题，我们无法点击输入的文本。

因此，我创建了一个自定义组件，无论我在textarea中添加什么，都会在隐藏的div中添加相同的内容。稍后，textarea会去掉隐藏的div的高度。这很好。

这是Fiddle

但我有一个小问题，每当用户按下"回车"时，这个组件都无法调整文本区域的高度。稍后，如果我按下任何字母，文本区域都会正确调整。问题是只检测到在内容末尾按下的"Enter"键（如果用户在内容中间按下"Enter"，则该组件工作正常）。

这是组件的HTML代码：

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

试试这样的。。。

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

编辑：

这对我来说很有效，只会在按下回车键时调整大小，考虑一下这可能不是你的意图，但这测试了特定的场景。

也许这是浏览器的问题，有些浏览器没有正确地实现所有事件，也许也可以尝试附加更改、按键和向下键，进行实验，看看你会得到什么。

扩展我的注释以包括溢出行：

<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是fiddle的默认值（0px填充+每个边框1px），效果完美。

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

相关文章：