Кілька рядків введення в <введення типу = "текст" />

У мене цей текст вводиться у формі:

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

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

Як зробити вклад більш схожим на textarea?

Для отримання багаторядкової обробки вам потрібно скористатися текстовою областю.

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

Можна зробити багаторядковий введення тексту, надавши йому word-break: break-word;атрибут. (Тестується лише в Chrome)

Ви не можете. На момент написання тексту єдиний елемент форми HTML, призначений для багаторядкових <textarea>.

Використовуйте 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 name="Text1"></textarea>

Remeber , що <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
    }
});