输入类型="text"/比;

我在一个表单中输入了这个文本:

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

我试图让它接受多行输入。宽度和高度使框更大，但用户可以输入所有(s)他想要的文本，但它只填充一行。

我如何使输入更像一个文本区域?

1509061 次浏览
小开

你不能。在撰写本文时，唯一被设计为多行的HTML表单元素是<textarea>。

小开

检查:

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

小开
最佳答案

您需要使用文本区域来获得多行处理。

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

小开

使用textarea

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

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

小开

可以通过赋予word-break: break-word;属性来创建文本输入多行。(仅在Chrome中测试)

小开

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

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

使用<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
}
});
小开

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

小开

如果你正在使用React，你可以使用第三方UI库梅。它有一个自定义的专有的<Input>元素和一个multiline选项。

正如LSE评论的那样，最终它被呈现为<textarea>。

  <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

小开

如果您不需要编辑它，您可以使用

<span>text here</span>

It will expand with the text.


提交答案