Domanda Posso aumentare la larghezza di una textarea con il testo?


Sto lavorando a un progetto in cui ho dati in div che possono essere di varie dimensioni. Quando un utente fa clic su una delle div, deve trasformarsi in una textarea modificabile. La larghezza è costante, ma mi piacerebbe che l'altezza inizi come l'altezza del div originale e poi cresci fino a un'altezza massima prima di aggiungere una barra di scorrimento. È possibile?


19
2018-04-05 22:48


origine


risposte:


Puoi usare contenteditable e lasciare che l'utente inserisca una scala div, ecco una demo: http://jsfiddle.net/gD5jy/

HTML

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

CSS

div[contenteditable]{
    border: 1px solid black;
    max-height: 200px;
    overflow: auto;
}

41
2018-04-05 22:59



Ecco la funzione 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; }

ecco lo stile css

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

e qui è il codice HTML

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

funziona bene per me


6
2018-04-05 22:54



C'è un eccellente articolo di A List Apart su questo argomento: Espansione delle aree di testo rese eleganti


4
2018-03-19 05:13