Múltiples líneas de entrada en <input type = "text" />

Tengo esta entrada de texto en un formulario:

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

Estoy tratando de hacer que tome múltiples líneas de entrada. El ancho y la altura hacen que el cuadro sea más grande, pero el usuario puede ingresar texto (s) todo lo que quiera, pero solo llena una línea.

¿Cómo hago que la entrada se parezca más a un área de texto?

Necesita usar un área de texto para obtener un manejo multilínea.

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

Es posible hacer una entrada de texto de varias líneas dándole el word-break: break-word;atributo. (Solo probé esto en Chrome)

No puedes Al momento de escribir, el único elemento de formulario HTML que está diseñado para ser multilínea es <textarea>.

Usa el área de texto

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

no deje ningún espacio entre las etiquetas de apertura y cierre O bien, esto dejará algunas líneas o espacios vacíos.

Mira esto:

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

El elemento TEXTAREA crea un control de entrada de texto de varias líneas.

Debe usar textareapara admitir entradas de varias líneas.

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

Si necesita un área de texto con altura automática, Use sigue 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>

La entrada no admite múltiples líneas. Necesita usar un área de texto para lograr esa característica.

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

Recuerde que <textarea>tienen el valor dentro de la etiqueta , no en el atributo:

<textarea>INITIAL VALUE GOES HERE</textarea>

No se puede cerrar a sí mismo como: <textarea/>

Para obtener más información, eche un vistazo a esto .

Si está utilizando React, la biblioteca material-ui.com puede ayudarlo 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

Usar <div contenteditable="true">( bien soportado ) con almacenamiento en <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
    }
});