Várias linhas de entrada em <input type = "text" />

403

Eu tenho esta entrada de texto em um formulário:

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

Eu estou tentando fazê-lo ter várias linhas de entrada. A largura e a altura tornam a caixa maior, mas o usuário pode digitar o texto todo (s) que deseja, mas ele preenche apenas uma linha.

Como tornar a entrada mais parecida com uma área de texto?

Principiante
fonte

Respostas:

676

Você precisa usar uma área de texto para obter manipulação de várias linhas.

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

Ólafur Waage
fonte
62
E a tag da área de texto não pode ser fechada automaticamente. <textarea \>é inválido.
Alex H
29
@alexH, independentemente da área de texto, essa é a barra errada. A resposta original foi fechada automaticamente, mas pelo menos foi a barra correta.
Adam
4
@ Adam, eu sei, mas não consigo mais editar. E eu não quero removê-lo, porque na minha opinião a parte de fechamento automático é importante.
Alex H
4
Sim, mas textareanão suporta o patternatributo Tão danado.
toddmo
11
O que não gosto sobre isso é que, no JQuery, você não pode definir o valor da área de texto usando val(). Você tem que appendfazer isso. :(
Malcolm Salvador
59

É possível criar uma linha múltipla de entrada de texto, atribuindo-lhe o word-break: break-word;atributo. (Apenas testei isso no Chrome)

Sté
fonte
11
Obrigado! Notei que o Chrome estava permitindo que várias linhas para insumos, o que eu realmente não querem, ea razão era a palavra-break, que foi herdada do elemento do corpo
rap1ds
3
Parece bom no Chrome 39 e Safari 8.0.2, mas não no Firefox 34 nos meus breves testes. :( jsfiddle.net/msybs9g7
Jeremy Wadhams
5
Eu acho que não está mais funcionando no Chrome.
Fifi
53

Você não pode. No momento da redação deste artigo, o único elemento de formulário HTML projetado para ser multilinhas é <textarea>.

Álvaro González
fonte
49

Use a área de texto

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

não deixe espaço entre as tags de abertura e fechamento Ou então Isso deixará algumas linhas ou espaços vazios.

themightysapien
fonte
7

Você deve usar textareapara suportar entradas de várias linhas.

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

Se você precisar de área de texto com altura automática, use a seguir com 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>

Prasad Gayan
fonte
0

A entrada não suporta várias linhas. Você precisa usar uma área de texto para alcançar esse recurso.

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

Lembre-se de que eles <textarea>têm o valor dentro da tag , não no atributo:

<textarea>INITIAL VALUE GOES HERE</textarea>

Não pode ser fechado automaticamente como: <textarea/>


Para mais informações, dê uma olhada nisso .

IgniteCoders
fonte
0

Se você estiver usando o React, a biblioteca material-ui.com pode ajudá-lo com:

  <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
fonte
-2

Use <div contenteditable="true">( bem suportado ) com armazenamento para <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
    }
});
Fanky
fonte