Kembangkan kawasan teks secara automatik

Question

Saya cuba membuat kawasan teks yang mudah dikembangkan secara automatik. Ini kod saya:

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

Tetapi kawasan teks berkembang tanpa had semasa anda menaip...

Saya tahu terdapat pemalam Dojo dan jQuery untuk ini, tetapi saya tidak mahu menggunakannya. Saya melihat pelaksanaannya dan pada asalnya menggunakan scrollHeight tetapi melakukan perkara yang sama.

Anda boleh mula menjawab dan menggunakan kawasan teks untuk memainkan jawapan anda.

Answer 1

Saya mahu kawasan yang berkembang secara automatik dihadkan oleh bilangan baris (cth. 5 baris). Saya mempertimbangkan untuk menggunakan unit "em", untuk penyelesaian Rob, bagaimanapun, ini rawan ralat dan tidak mengambil kira perkara seperti pelapik.

Ini yang saya fikirkan:

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);
};

Fiddle: http://jsfiddle.net/cgSj3/

Answer 2

Sedang digunakanscrollHeight正确扩展/收缩文本区域之前重置高度。 Math.min() boleh digunakan untuk menetapkan had ketinggian kawasan teks.

Kod:

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";
};

Fiddle: http://jsfiddle.net/gjqWy/155

Nota: acarainput tidak disokong input 事件IE8 及更早版本不支持 。如果您也想支持这个古老的浏览器，请使用 keydown 或 keyup 以及 onpaste 和/或 oncut dalam IE8 dan lebih awal. Jika anda juga ingin menyokong penyemak imbas purba ini, sila gunakan keydown atau keyup dan onpaste dan/atau oncut .