Puis-je faire un textarea croître avec le texte à une hauteur maximum?

Je travaille sur un projet où j'ai des données dans les divs qui peuvent être de différentes tailles. Lorsqu'un utilisateur clique sur l'un des divs, il a besoin de se transformer en une modifiables textarea. La largeur est constante, mais j'aimerais la hauteur pour commencer que la hauteur de l'original de la div, puis atteindre une hauteur maximum avant d'ajouter une barre de défilement. Est-ce possible?

  • Quelle est la hauteur maximum?
  • Yup, ça semble possible. Vous aurez besoin de javascript pour le faire.
InformationsquelleAutor Darkenwolf | 2013-04-05
  1. 52

    Vous pouvez utiliser contenteditable et de laisser l'entrée de l'utilisateur dans un droit div, voici une démo: http://jsfiddle.net/gD5jy/

    HTML

    <div contenteditable>
    type here...
</div>

    CSS

    div[contenteditable]{
    border: 1px solid black;
    max-height: 200px;
    overflow: auto;
}
    • +1 pour contenteditable.
    • Magnifique, merci
    • Être conscient de la contenteditable rend complètement différent HTML sur différents navigateurs, en particulier quand il s'agit de sauts de ligne.
    • la droite. J'ai remplacé pre pour div et a obtenu une rupture de la ligne et de l'emballage, je voulais en Chrome. Quand j'ai vu son commentaire, j'ai vérifié Firefox et a fini par avoir à ajouter white-space: pre-wrap de mon CSS. Je n'ai pas essayer d'autres navigateurs.
    • Que faire si je ne peux utiliser contenteditable en raison de Réagir à des restrictions? Aaand je ne peux pas utiliser Draft.js soit en raison de retard de mises à jour d'état.
    • est-ce à contenteditable div accepter toute dom événement? comment puis-je identifier les changements de la innerHTML dans cette div?

    InformationsquelleAutor Sandro Paganotti
  2. 6

    Voici la fonction JavaScript

    //TextArea is the Id from your textarea element
//MaxHeight is the maximum height value
function textarea_height(TextArea, MaxHeight) {
    textarea = document.getElementById(TextArea);
    textareaRows = textarea.value.split("\n");
    if(textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
    else if(textareaRows.length >= MaxHeight) counter = MaxHeight;
    else counter = 1;
    textarea.rows = counter; }

    ici est le style css

    .textarea {
height: auto;
resize: none; }

    et voici le code HTML

    <textarea id="the_textarea" onchange="javascript:textarea_height(the_textarea, 15);" width="100%" height="auto" class="textarea"></textarea>

    il fonctionne très bien pour moi

    • Que faire si le textarea contient pas de retours à la ligne, juste envelopper?
    • je viens de copier ce code à partir d'un ancien projet... mais il est possible de modifier le code de vos besoins... mabye, vous pouvez découper le code de toutes les 40 signes
    • Mauvaise solution. Ce qui si l'utilisateur n'utilise pas entrer?
    • A travaillé pour moi, avec peu de changement dans mon cas. fonction ResizeTextBox(elm) { var rowcount = $(elm).attr('lignes'); var textareaRows = $(elm).val().split("\n"); if (textareaRows[0] != "undefined" && textareaRows.longueur < rowcount - 1) { compteur = nombre de lignes; } else { compteur = textareaRows.longueur + 1; } $(elm).attr ("rangées", compteur) }
    InformationsquelleAutor Alex Ruhl
  3. 5

    Il y a un excellent Une Liste à Part l'article sur ce sujet: L'Expansion Des Zones De Texte Fait Élégant

    • Merci pour le lien! Excellent article. Je pense que vous devriez au moins expliquer en quelques phrases comment l'auteur a - t-il à donner au lecteur le contexte avant de cliquer sur le lien. Sinon votre post serait mieux comme un commentaire selon Débordement de la Pile d'étiquette. Aussi, pour sauver les gens du temps de débogage, j'avais besoin de changer container.className += "active"; à container.className += " active"; à obtenir de l'auteur du code de travail.
    InformationsquelleAutor olivergeorge