如何使输入[type = text]元素作为textarea工作？

Question

我有一个元素input[type=text],我想让它作为textarea元素.意味着我需要有一个更大的input[type=text]元素高度,显示多行,就像textarea元素.我有一个问题,我不能取代textarea input[type=text],所以我需要一种方法,我可以转换或使其工作textarea.

Answer 1

在这里回答:

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

事实证明,添加css属性word-break: break-word;使其表现得更像你想要的.我做了一个快速测试,它确实有效.

买家要小心,还会有其他的功能,textarea这是否input[type="text"]不能有.但这是一个开始!

DEMO

input{
    height:500px;
    width:500px;
    word-break: break-word;
}

<input type="text">

这将只允许文本在到达右边框时流向下一行,但它不允许您使用返回键开始新行,并且文本在输入中以verticaly为中心.

如果JavaScript是一个选项,就像尝试扭曲穷人input的手臂一样有趣,直到它表现为a textarea,你问题的最佳解决方案是显示实际textarea,隐藏文本input并保持与javascript同步.这是小提琴:

http://jsfiddle.net/fen05zd8/1/

如果jQuery是一个选项,那么你可以在你的目标转换input[type="text"]到textarea对飞.虽然转换,你可以复制所有相关的属性,如id和value和class.事件将textarea使用事件委派或类选择器自动指向替换的边界.

这样您就不必更改现有标记(正如您所说,无法更改为textarea).只需注入一点Javascript/jQuery和viola就可以获得textarea使用实际的功能textarea.

上面是一个使用Javascript的示例演示.另一个使用jQuery的示例演示在这里:http://jsfiddle.net/abhitalks/xqrfedg2/

还有一个简单的片段:

$("a#go").on("click", function () {

    $("input.convert").each(function () {
        var $txtarea = $("<textarea />");
        $txtarea.attr("id", this.id);
        $txtarea.attr("rows", 8);
        $txtarea.attr("cols", 60);        
        $txtarea.val(this.value);
        $(this).replaceWith($txtarea);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Name:</label><input id="txt1" type="text" />
<br /><br />
<label>Address:</label><input id="txt2" type="text" class="convert" value="Address here.." />
<hr />
<a id="go" href="#">Convert</a>

Answer 2

为什么不使用 Textarea 标签\n之类的

\n\n

\xe2\x80\x8b<textarea id="txtArea" rows="10" cols="70"></textarea>\n

\n\n

“input”标签不支持 rows 和 cols 属性。这就是为什么最好的选择是使用具有 rows 和 cols 属性的文本区域。您仍然可以添加“name”属性，还有一个有用的“wrap”属性，它可以在各种情况下很好地发挥作用。

\n\n

给输入标签赋予高度没有意义\n供参考

\n\n

<Input type="textarea" /> 中超过 1 行

\n