Mehrere Eingabezeilen in <input type = “text” />

403

Ich habe diesen Text in einer Form eingegeben:

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

Ich versuche, es dazu zu bringen, mehrere Eingabezeilen zu verwenden. Die Breite und Höhe machen das Feld größer, aber der Benutzer kann alle gewünschten Texte eingeben, die jedoch nur eine Zeile ausfüllen.

Wie mache ich die Eingabe eher wie ein Textbereich?

html Anfänger
quelle

Antworten:

676

Sie müssen einen Textbereich verwenden, um eine mehrzeilige Behandlung zu erhalten.

<textarea name="Text1" cols="40" rows="5"></textarea>
Erweitern Sie das Snippet

Ólafur Waage
quelle
62
Und das Textarea-Tag kann sich nicht selbst schließen. <textarea \>ist ungültig.
Alex H
29
@alexH unabhängig vom Textbereich, das ist der falsche Schrägstrich. Die ursprüngliche Antwort hatte sich selbst geschlossen, aber zumindest war es der richtige Schrägstrich.
Adam
4
@Adam Ich weiß, aber ich kann mich nicht mehr bearbeiten. Und ich möchte es nicht entfernen, weil meiner Meinung nach der selbstschließende Teil wichtig ist.
Alex H
4
Ja, textareaunterstützt das patternAttribut jedoch nicht . So verdammt.
Toddmo
1
Was mir daran nicht gefällt, ist, dass Sie in JQuery den Textbereichswert nicht mit festlegen können val(). Du musst appendes tun. :(
Malcolm Salvador
59

Es ist möglich, eine mehrzeilige Texteingabe zu erstellen, indem Sie ihr das word-break: break-word;Attribut geben. (Nur in Chrome getestet)

Sté
quelle
1
Vielen Dank! Ich bemerkte, dass Chrome mehrere Zeilen für Eingaben zuließ, was ich überhaupt nicht wollte, und der Grund war ein
Wortumbruch, der
3
Sieht in Chrome 39 und Safari 8.0.2 gut aus, in meinen kurzen Tests jedoch nicht in Firefox 34. :( jsfiddle.net/msybs9g7
Jeremy Wadhams
5
Ich denke, es funktioniert nicht mehr in Chrome.
Fifi
53

Das kannst du nicht. Zum Zeitpunkt des Schreibens ist das einzige HTML-Formularelement, das mehrzeilig ist <textarea>.

Álvaro González
quelle
49

Verwenden Sie den Textbereich 

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

Lassen Sie zwischen den öffnenden und schließenden Tags kein Leerzeichen. Andernfalls bleiben einige leere Zeilen oder Leerzeichen übrig.

themightysapien
quelle
7

Sie sollten verwenden textarea, um mehrzeilige Eingaben zu unterstützen.

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

Wenn Sie einen Textbereich mit automatischer Höhe benötigen , verwenden Sie Folgendes mit reinem Javascript.

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>
Erweitern Sie das Snippet

Prasad Gayan
quelle
0

Die Eingabe unterstützt nicht mehrere Zeilen. Sie müssen einen Textbereich verwenden , um diese Funktion zu erreichen.

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

Denken Sie daran, dass die <textarea>den Wert innerhalb des Tags haben , nicht im Attribut:

<textarea>INITIAL VALUE GOES HERE</textarea>

Es kann nicht selbst geschlossen werden als: <textarea/>

Weitere Informationen finden Sie hier .

IgniteCoders
quelle
0

Wenn Sie React verwenden, kann Ihnen die Bibliothek material-ui.com helfen bei:

  <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

Alan
quelle
-2

Verwenden Sie <div contenteditable="true">( gut unterstützt ) mit Speicherung zu <input type="hidden">.

HTML:

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

js (mit 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
    }
});
Fanky
quelle