<input type ="text"/>中的多行输入

Question

我有一个表格的文本输入:

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

我试图让它采取多行输入.宽度和高度使盒子更大,但是用户可以输入他想要的所有文本,但它只填充一行.

如何使输入更像textarea？

Answer 1

您需要使用textarea来获得多行处理.

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

Answer 2

可以通过为其提供word-break: break-word;属性来创建文本输入多行.(仅在Chrome中测试过)

Answer 3

你不能.设计为多行的唯一HTML表单元素是<textarea>.

Answer 4

使用textarea

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

不要在开始和结束标签之间留下任何空格或者否则这会留下一些空行或空格.

Answer 5

检查一下:

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

TEXTAREA元素创建一个多行文本输入控件

Answer 6

如果您需要具有自动高度增加功能的多行文本区域，您可以使用以下简单的 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>

Answer 7

与存储一起使用<div contenteditable="true">（支持良好<input type="hidden">） 。

HTML：

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

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

Answer 8

您应该使用它textarea来支持多行输入。

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