Agrandir automatiquement la zone de texte

Question

J'essaie de créer une simple zone de texte à expansion automatique. Voici mon code :

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

Mais la zone de texte s'agrandit à l'infini à mesure que vous tapez...

Je sais qu'il existe des plugins Dojo et jQuery pour cela, mais je ne veux pas les utiliser. J'ai regardé leur implémentation et j'ai utilisé à l'origine scrollHeight mais j'ai fait la même chose.

Vous pouvez commencer à répondre et utiliser la zone de texte pour lire votre réponse.

Answer 1

Je souhaite que la zone d'expansion automatique soit limitée par le nombre de lignes (par exemple 5 lignes). J'ai envisagé d'utiliser des unités "em", pour la solution de Rob, cependant, c'est sujet aux erreurs et ne prend pas en compte des éléments comme le remplissage.

Voici ce que je pensais :

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

Violon : http://jsfiddle.net/cgSj3/

Answer 2

En cours d'utilisationscrollHeight正确扩展/收缩文本区域之前重置高度。 Math.min() peut être utilisé pour définir la limite de hauteur de la zone de texte.

Code :

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

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

Remarque : L'événement input n'est pas pris en charge input 事件IE8 及更早版本不支持 。如果您也想支持这个古老的浏览器，请使用 keydown 或 keyup 以及 onpaste 和/或 oncut dans IE8 et versions antérieures. Si vous souhaitez également prendre en charge cet ancien navigateur, veuillez utiliser keydown ou keyup et onpaste et/ou oncut .