我想知道用戶是否移動到了新行而沒有按下textarea元素中的輸入按鈕

Question

當用戶在textarea中寫入任何內容時，當按下Enter按鈕移動到新行時，會創建一個字符'\n'。

如果用戶繼續寫下來，直到他到達行末，然後在沒有按下回車按鈕的情況下自動轉入新行，那麼我該如何知道這一點呢？

下面的代碼會增加textarea的時候按下回車鍵，我想在做同樣的行爲時，自動打開到一個新的行不按回車鍵：

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>

Answer 1

有多個庫可以爲你做到這一點。例如。

http://www.jacklmoore.com/autosize/

https://alexdunphy.github.io/flexText/

編輯：

當你不想直接使用庫，我檢查the code of the jacklmoores autosize。

它的功能基本上是將高度設置爲自動，然後使用滾動高度作爲textarea的高度。我還將onkeyup更改爲onkeydown，以便在按住某個鍵時調整其大小。

var textarea = document.getElementById('text'); 
textarea.onkeydown = function (eve) { 
    textarea.style.height = 'auto' 
    textarea.style.height = textarea.scrollHeight+'px'; 
} 

JSFiddle

Answer 2

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>