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

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

14

Überprüfen Sie dies:

http://www.w3.org/TR/html401/interact/forms.html#h-17.7

Das TEXTAREA-Element erstellt ein mehrzeiliges Texteingabesteuerelement

— Matías Fidemraizer
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