自動擴展文字區域
P粉245489391
P粉245489391 2023-10-21 08:49:23
0
2
661

我正在嘗試做一個簡單的自動擴展文字區域。這是我的程式碼:

textarea.onkeyup = function () {
  textarea.style.height = textarea.clientHeight + 'px';
}

但是文字區域會隨著您的輸入而無限增長...

我知道有 Dojo 和 jQuery 插件可以實現此目的,但我不想使用它們。我查看了他們的實現,最初使用 scrollHeight 但做了同樣的事情。

您可以開始回答並使用文字區域來播放您的答案。

P粉245489391
P粉245489391

全部回覆(2)
P粉786800174

我希望自動擴充區域受行數限制(例如 5 行)。我考慮過使用“em”單位,對於 Rob 的解決方案,但是,這是 容易出錯並且不會考慮填充等內容。

這就是我的想法:

var textarea = document.getElementById("textarea");
var limitRows = 5;
var messageLastScrollHeight = textarea.scrollHeight;

textarea.oninput = function() {
    var rows = parseInt(textarea.getAttribute("rows"));
    // If we don't decrease the amount of rows, the scrollHeight would show the scrollHeight for all the rows
    // even if there is no text.
    textarea.setAttribute("rows", "1");

    if (rows < limitRows && textarea.scrollHeight > messageLastScrollHeight) {
        rows++;
    } else if (rows > 1 && textarea.scrollHeight < messageLastScrollHeight) {
        rows--;
    }

    messageLastScrollHeight = textarea.scrollHeight;
    textarea.setAttribute("rows", rows);
};

小提琴:http://jsfiddle.net/cgSj3/#

P粉447785031

在使用scrollHeight正確擴展/縮小文字區域之前重置高度。 Math.min() 可用來設定文字區域高度的限制。

程式碼:

var textarea = document.getElementById("textarea");
var heightLimit = 200; /* Maximum height: 200px */

textarea.oninput = function() {
  textarea.style.height = ""; /* Reset the height*/
  textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px";
};

小提琴:http://jsfiddle.net/gjqWy/155

注意:input 事件IE8 及更早版本不支援 。如果您也想支援這個古老的瀏覽器,請使用 keydownkeyup 以及 onpaste 和/或 oncut

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板