Question

我有一个元素input[type=text]，我想让它作为textarea元素工作。意味着我需要有一个更大的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

＆＃13;

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

＆＃13;

<input type="text">

＆＃13;

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

如果JavaScript是一个选项，那么尝试扭曲不良input的手臂直到它表现为textarea同样有趣，问题的最佳解决方案是显示实际的textarea，隐藏文字input并保持与javascript同步。这是小提琴：

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

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

这样您就不必更改现有标记（正如您所说，无法更改为textarea）。只需注入一点Javascript / jQuery，并使用实际的textarea获得textarea的功能。

上面是一个使用Javascript的示例演示。另一个使用jQuery的示例演示如下： http://jsfiddle.net/abhitalks/xqrfedg2/

一个简单的片段：

＆＃13;

$("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);
    });
});

＆＃13;

<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>

＆＃13;

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

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

Answer 3

为什么不使用Textarea标签像

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

＆＃34;输入＆＃34; tag不支持rows和cols属性。这就是为什么最好的选择是使用带有行和列属性的textarea。您仍然可以添加＆＃34;名称＆＃34;属性，还有一个有用的＆＃34;包装＆＃34;在各种情况下可以很好地服务的属性。

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

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

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

5 个答案: