javascript - 如何使 input[type=text] 元素用作文本区域？

Question

我有一个元素 input[type=text]，我想让它作为一个文本区域元素。意味着我需要具有更大高度的 input[type=text] 元素，并像 textarea 元素一样显示多行。我有一个问题，我不能用 textarea 代替 input[type=text]，所以我需要一种方法来转换或使其像 textarea 一样工作.

Answer 1

这里的回答是:

Multiple lines of input in <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">

这只会让文本在到达右边框时流到下一行，但不会让您使用返回键开始新行并且文本在输入中垂直居中。

---

如果 JavaScript 是一个选项，那么尝试扭转可怜的 input 的 ARM 直到它表现得像一个 textarea 一样有趣，这是您的最佳解决方案问题是显示实际的 textarea，隐藏文本 input 并使两者与 javascript 保持同步。这是 fiddle :

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

---

如果 jQuery 是一个选项，那么您可以即时将目标 input[type="text"] 转换为 textarea。转换时，您可以复制所有相关属性，例如 id 和 value 以及 class。事件将自动指向使用事件委托(delegate)或通过类选择器绑定(bind)的替换 textarea。

这样您就不必更改现有的标记(正如您所说，更改为文本区域对您来说是不可能的)。只需注入(inject)一点 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>