Plusieurs lignes d'entrée dans <type d'entrée = "texte" />

J'ai cette entrée de texte sous une forme:

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

J'essaie de le faire prendre plusieurs lignes d'entrée. La largeur et la hauteur rendent la boîte plus grande, mais l'utilisateur peut saisir tout le texte qu'il souhaite, mais il ne remplit qu'une seule ligne.

Comment rendre l'entrée plus semblable à une zone de texte?

Vous devez utiliser une zone de texte pour obtenir une gestion multiligne.

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

Il est possible de faire une saisie de texte sur plusieurs lignes en lui word-break: break-word;attribuant l' attribut. (Testé uniquement dans Chrome)

Tu ne peux pas. Au moment de la rédaction du présent document, le seul élément de formulaire HTML conçu pour être multiligne est <textarea>.

Utilisez la zone de texte

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

ne laissez aucun espace entre les balises d'ouverture et de fermeture. Sinon, cela laissera des lignes ou des espaces vides.

Vérifiez ça:

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

L'élément TEXTAREA crée un contrôle de saisie de texte sur plusieurs lignes

Vous devez utiliser textareapour prendre en charge les entrées sur plusieurs lignes.

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

Si vous avez besoin d'une zone de texte avec hauteur automatique, utilisez la suite avec du javascript pur,

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>

L'entrée ne prend pas en charge plusieurs lignes. Vous devez utiliser une zone de texte pour obtenir cette fonctionnalité.

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

N'oubliez pas qu'ils <textarea>ont la valeur à l'intérieur de la balise , pas dans l'attribut:

<textarea>INITIAL VALUE GOES HERE</textarea>

Il ne peut pas être fermé automatiquement car: <textarea/>

Pour plus d'informations, jetez un œil à ceci .

Si vous utilisez React, la bibliothèque material-ui.com peut vous aider avec:

  <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

Utilisez <div contenteditable="true">( bien pris en charge ) avec le stockage sur <input type="hidden">.

HTML:

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

js (en utilisant 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
    }
});