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

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?

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

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

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

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

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.

Sprawdź to:

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

Element TEXTAREA tworzy wielowierszową kontrolę wprowadzania tekstu

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>

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>

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 .

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

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
    }
});