我想知道用户是否移动到新行而不按 textarea 元素中的输入按钮
I want to know if the user moved to a new line Without pressing the enter button in textarea element
当用户在文本区域中写入任何内容,并按下回车键移动到新行时,会创建一个字符 '\n'
。
如果用户继续写到行尾,然后不按回车键就自动换行,我怎么知道呢?
下面的代码会在按下回车按钮时增加文本区域,我想在不按下回车按钮的情况下自动换行时做同样的行为:
var textarea = document.getElementById('text');
textarea.onkeyup = function (eve) {
if (eve.keyCode == 13) { // 13 = enter key
textarea.style.height = textarea.offsetHeight + 25 + 'px';
}
};
#text {width:300px;}
<textarea id="text"></textarea>
有多个图书馆可以为您做这件事。例如
http://www.jacklmoore.com/autosize/
https://alexdunphy.github.io/flexText/
编辑:
因为你不想直接使用这个库,所以我检查了the code of the jacklmoores autosize。
它所做的基本上是将高度设置为自动,然后使用滚动高度作为文本区域的高度。我还将您的 onkeyup 更改为 onkeydown 以便在按住键时调整大小。
var textarea = document.getElementById('text');
textarea.onkeydown = function (eve) {
textarea.style.height = 'auto'
textarea.style.height = textarea.scrollHeight+'px';
}
var textarea = document.getElementById('text');
textarea.onkeyup = function (eve) {
if (eve.keyCode == 13) { // 13 = enter key
textarea.style.height = textarea.offsetHeight + 25 + 'px';
}
};
#text {width:300px;}
<textarea id="text"></textarea>
当用户在文本区域中写入任何内容,并按下回车键移动到新行时,会创建一个字符 '\n'
。
如果用户继续写到行尾,然后不按回车键就自动换行,我怎么知道呢?
下面的代码会在按下回车按钮时增加文本区域,我想在不按下回车按钮的情况下自动换行时做同样的行为:
var textarea = document.getElementById('text');
textarea.onkeyup = function (eve) {
if (eve.keyCode == 13) { // 13 = enter key
textarea.style.height = textarea.offsetHeight + 25 + 'px';
}
};
#text {width:300px;}
<textarea id="text"></textarea>
有多个图书馆可以为您做这件事。例如
http://www.jacklmoore.com/autosize/
https://alexdunphy.github.io/flexText/
编辑:
因为你不想直接使用这个库,所以我检查了the code of the jacklmoores autosize。
它所做的基本上是将高度设置为自动,然后使用滚动高度作为文本区域的高度。我还将您的 onkeyup 更改为 onkeydown 以便在按住键时调整大小。
var textarea = document.getElementById('text');
textarea.onkeydown = function (eve) {
textarea.style.height = 'auto'
textarea.style.height = textarea.scrollHeight+'px';
}
var textarea = document.getElementById('text');
textarea.onkeyup = function (eve) {
if (eve.keyCode == 13) { // 13 = enter key
textarea.style.height = textarea.offsetHeight + 25 + 'px';
}
};
#text {width:300px;}
<textarea id="text"></textarea>