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

404

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

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

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

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

html начинающий
источник

Ответы:

677

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

<textarea name="Text1" cols="40" rows="5"></textarea>
Развернуть фрагмент

Олафур Вааге
источник
62
И тег textarea не может быть самозакрывающимся. <textarea \>является недействительным.
Алекс Х
29
@alexH независимо от текстовой области, это неправильный слэш. Оригинальный ответ был самозакрывающимся, но по крайней мере это был правильный удар.
Адам
4
@ Адам, я знаю, но я больше не могу редактировать. И я не хочу его удалять, потому что, на мой взгляд, важна самозакрывающаяся часть.
Алекс Х
4
Да, но textareaне поддерживает patternатрибут. Так чертовски.
toddmo
1
что мне не нравится в этом, так это то, что в JQuery нельзя установить значение textarea с помощью val(). Вы должны appendк этому. :(
Малкольм Сальвадор
59

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

Sté
источник
1
Спасибо! Я заметил, что Chrome разрешает вводить несколько строк, чего я совершенно не хотел, и причина была в разрыве слов, унаследованном от элемента body
rap1ds
3
Хорошо выглядит в Chrome 39 и Safari 8.0.2, но не в Firefox 34 в моем кратком тестировании. :( jsfiddle.net/msybs9g7
Джереми Уодхэмс
5
Я думаю, что это больше не работает в Chrome.
Фифи
53

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

Альваро Гонсалес
источник
49

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

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

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

themightysapien
источник
7

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

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>
Осанда Дешан
источник
1

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

Прасад Гаян
источник
0

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

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

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

<textarea>INITIAL VALUE GOES HERE</textarea>

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

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

IgniteCoders
источник
0

Если вы используете 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

Алан
источник
-2

Используйте <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
    }
});
Fanky
источник