Più righe di input in <input type = "text" />


403

Ho questo input di testo in una forma:

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

Sto cercando di farlo per prendere più righe di input. La larghezza e l'altezza rendono la casella più grande, ma l'utente può inserire del testo tutto ciò che desidera e riempie solo una riga.

Come posso rendere l'input più simile a una textarea?

Risposte:


676

È necessario utilizzare un'area di testo per ottenere la gestione multilinea.

<textarea name="Text1" cols="40" rows="5"></textarea>


62
E il tag textarea non può essere autochiudente. <textarea \>è invalido.
Alex H,

29
@alexH indipendentemente da textarea, questa è la barra sbagliata. La risposta originale era autochiudente, ma almeno era la barra corretta.
Adam,

4
@Adam Lo so, ma non posso più modificarli. E non voglio rimuoverlo, perché secondo me la parte che si chiude da sola è importante.
Alex H,

4
Sì, ma textareanon supporta l' patternattributo. Così dannatamente.
toddmo,

1
quello che non mi piace di questo è che in JQuery, non puoi impostare il valore di textarea usando val(). Devi appendfarlo. :(
Malcolm Salvador,

59

È possibile creare una riga multipla per l'inserimento di testo assegnandogli l' word-break: break-word;attributo. (Testato solo su Chrome)


1
Grazie! Ho notato che Chrome consentiva più linee per gli input, cosa che non volevo assolutamente, e il motivo era la rottura delle parole ereditata dall'elemento body
rap1ds,

3
Sembra buono in Chrome 39 e Safari 8.0.2, ma non in Firefox 34 nei miei brevi test. :( jsfiddle.net/msybs9g7
Jeremy Wadhams il

5
Penso che non funzioni più in Chrome.
Fifi,


49

Usa la textarea

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

non lasciare spazio tra i tag di apertura e chiusura. Oppure Altrimenti lascerà alcune linee o spazi vuoti.



7

È necessario utilizzare textareaper supportare input su più righe.

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

1

Se hai bisogno di textarea con altezza automatica, Usa segue con javascript puro,

function auto_height(elem) {  /* javascript */
    elem.style.height = "1px";
    elem.style.height = (elem.scrollHeight)+"px";
}
.auto_height { /* CSS */
  width: 100%;
}
<textarea rows="1" class="auto_height" oninput="auto_height(this)"></textarea>


0

L'input non supporta più righe. È necessario utilizzare un'area di testo per ottenere quella funzione.

<textarea name="Text1"></textarea>

Ricorda che <textarea>hanno il valore all'interno del tag , non nell'attributo:

<textarea>INITIAL VALUE GOES HERE</textarea>

Non può essere chiuso automaticamente come: <textarea/>


Per ulteriori informazioni, dai un'occhiata a questo .


0

Se stai usando React, la libreria material-ui.com può aiutarti con:

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline


-2

Utilizzare <div contenteditable="true">( ben supportato ) con la memorizzazione in <input type="hidden">.

HTML:

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

js (usando jQuery)

$("#multilineinput").on('keyup',function(e) {   
    $("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.