Несколько строк ввода в <input type = «text» />

У меня есть этот ввод текста в форме:

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

Я пытаюсь заставить его занять несколько строк ввода. Ширина и высота делают поле больше, но пользователь может вводить текст все, что он хочет, но он заполняет только одну строку.

Как сделать ввод более похожим на текстовую область?

Вам нужно использовать текстовую область, чтобы получить многострочную обработку.

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

Можно сделать многострочный ввод текста, присвоив ему word-break: break-word;атрибут. (Только проверено это в Chrome)

Ты не можешь На момент написания статьи единственным элементом формы HTML, который предназначен для работы с несколькими строками, является <textarea>.

Используйте текстовую область

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

не оставляйте пробелов между открывающими и закрывающими тегами. Иначе. Это оставит пустые строки или пробелы.

Проверь это:

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

Элемент TEXTAREA создает многострочный элемент управления вводом текста

Вы должны использовать textareaдля поддержки многострочных входов.

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

Если вам нужна текстовая область с авто-высотой, используйте следует с чистым 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>

Ввод не поддерживает несколько строк. Вам нужно использовать textarea для достижения этой функции.

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

Помните, что они <textarea>имеют значение внутри тега , а не в атрибуте:

<textarea>INITIAL VALUE GOES HERE</textarea>

Оно не может быть само закрыто как: <textarea/>

Для получения дополнительной информации, посмотрите на это .

Если вы используете React, библиотека material-ui.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

Используйте <div contenteditable="true">( поддерживается хорошо ) с сохранением в <input type="hidden">.

HTML:

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

JS (с использованием 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
    }
});