Wiele wierszy wprowadzania w <input type = „text” />

403

Mam ten tekst wpisany w formie:

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

Próbuję uzyskać wiele linii wejściowych. Szerokość i wysokość sprawiają, że pole jest większe, ale użytkownik może wpisać tekst, który chce, ale wypełnia tylko jedną linię.

Jak uczynić wprowadzanie bardziej przypominającym obszar tekstowy?

Początkujący
źródło

Odpowiedzi:

676

Aby uzyskać obsługę multilinii, musisz użyć pola tekstowego.

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

Lalafur Waage
źródło
62
Tag textarea nie może się samozamykać. <textarea \>jest nieważny.
Alex H
29
@alexH niezależnie od obszaru tekstowego, to niewłaściwy slash. Oryginalna odpowiedź miała samozamykanie, ale przynajmniej była to prawidłowa kreska.
Adam,
4
@Adam Wiem, ale nie mogę już edytować. I nie chcę tego usuwać, ponieważ moim zdaniem część samozamykająca jest ważna.
Alex H
4
Tak, ale textareanie obsługuje tego patternatrybutu. Cholera.
toddmo
1
nie podoba mi się to, że w JQuery nie można ustawić wartości textarea za pomocą val(). Musisz appendto zrobić. :(
Malcolm Salvador,
59

Możliwe jest utworzenie wielowierszowego wprowadzania tekstu, nadając mu ten word-break: break-word;atrybut. (Testowałem to tylko w Chrome)

Sté
źródło
1
Dzięki! Zauważyłem, że Chrome zezwala na wprowadzanie wielu wierszy danych wejściowych, czego zupełnie nie chciałem, a powodem tego było
dzielenie
3
Wygląda dobrze w Chrome 39 i Safari 8.0.2, ale nie w Firefox 34 w moich krótkich testach. :( jsfiddle.net/msybs9g7
Jeremy Wadhams
5
Myślę, że to już nie działa w Chrome.
Fifi
53

Nie możesz W chwili pisania tego tekstu jedynym elementem formularza HTML, który ma być wielowierszowy, jest <textarea>.

Álvaro González
źródło
49

Użyj obszaru tekstowego

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

nie zostawiaj spacji między znacznikami otwierającym i zamykającym. Lub jeszcze To pozostawi puste linie lub spacje.

themightysapien
źródło
7

Należy użyć textareado obsługi danych wejściowych z wieloma wierszami.

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>
Osanda Deshan
źródło
1

Jeśli potrzebujesz obszaru tekstowego z automatyczną wysokością, użyj polecenia z czystym 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>

Prasad Gayan
źródło
0

Dane wejściowe nie obsługują wielu wierszy. Aby skorzystać z tej funkcji, musisz użyć pola tekstowego .

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

Pamiętaj, że <textarea>mają wartość wewnątrz tagu , a nie w atrybucie:

<textarea>INITIAL VALUE GOES HERE</textarea>

Nie można go samozamykać, ponieważ: <textarea/>


Aby uzyskać więcej informacji, spójrz na to .

IgniteCoders
źródło
0

Jeśli korzystasz z React, biblioteka material-ui.com może ci pomóc:

  <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
źródło
-2

Użyj <div contenteditable="true">( obsługiwane dobrze ) z przechowywaniem do <input type="hidden">.

HTML:

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

js (używając 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
źródło