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

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 的手臂直到它表现得像 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/

还有一个简单的 sn-p：

$("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

$('input[type="button"]').click(function(e) {
  $('input[type="text"]').val($('#source').html());  
});

#source {
  border: 1px solid #ccc;
  height: auto;
  margin-top: 10px;
  min-height: 10px;
  overflow: auto;
  padding: 5px;
  width: 106px;
  word-break: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="text" />
<div id="source" contenteditable=""></div>

<input type="button" value="Send" />

这将是 HTML，唯一的缺点是输入会提交 HTML。 以这个为例..

Lorem ipsum Dolores amet

会这样提交：Lorem ipsum <br> Dolores amet

这是一个代码笔：http://codepen.io/pacMakaveli/pen/MYYOZW

Answer 3

为什么不使用 Textarea 标签 喜欢

​<textarea id="txtArea" rows="10" cols="70"></textarea>

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

给输入标签指定高度没有意义 供参考

More than 1 row in <Input type="textarea" />

Answer 4

您不能将 input[type=text] 用作 <textarea> 。因为只有设计为多行的 HTML 表单元素是 textarea。

Answer 5

http://jsfiddle.net/710u7qns/ 这样的东西会起作用吗？您需要将“Enter”视为后端的新行。

html:

<form id="frm">
    <input name="ip" type="text" id="it" style="display:none;"></input>
    <textarea id='ta'></textarea>
    <input type="submit" id="btn">submit</button>
</form>

JS：

document.getElementById("ta").addEventListener("keyup", function(e){
    document.getElementById("it").value = document.getElementById("it").value + e.key;
});