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

How can make an input[type=text] element to work as textarea?

提问by Vinay Patial

I have an element input[type=text], I want to make it works as an textarea element. Means I need to have a bigger height of an input[type=text]element with showing multiple lines just like an textarea element. I have an issue that I can't take textarea in place of input[type=text], so I need a way where I can convert or make it work as textarea.

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

回答by Victor

As answered here:

正如这里的回答：

Multiple lines of input in <input type="text" />

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

It turns out that adding the css property word-break: break-word;makes it behave a bit more as you want it. I did a quick test and it does work.

事实证明，添加 css 属性word-break: break-word;会使它的行为更像您想要的那样。我做了一个快速测试，它确实有效。

Buyer beware, there will be other features textareadoes that input[type="text"]can't have. But it's a start!

买家当心，会有其他功能textarea没有input[type="text"]。但这是一个开始！

DEMO

演示

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

<input type="text">

This will only allow the text to flow to the next line when it hits the right border but it won't let you use the return key to start a new line and the text is verticaly centered in the input.

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

---

---

If JavaScript is an option, as much fun as it is to try and twist poor input's arm until it behaves as a textarea, the best solution to your problem is to display an actual textarea, hide the text inputand keep both in sync with javascript. Here is the fiddle:

如果 JavaScript 是一个选项，那么尝试和扭转poorinput的手臂直到它表现得像 a一样有趣，那么textarea解决问题的最佳解决方案是显示一个实际的textarea、隐藏文本input并使两者与 javascript 保持同步。这是小提琴：

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

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

---

---

If jQuery is an option, then you could convert your target input[type="text"]to textareaon the fly. While converting, you could copy all relevant attributes like idand valueand class. Events will automatically point to the replaced textareabound using event delegation or via class selectors.

如果 jQuery 是一个选项，那么您可以将目标转换input[type="text"]为动态textarea。转换时，您可以复制所有相关属性，如idandvalue和class。事件将textarea使用事件委托或通过类选择器自动指向被替换的边界。

This way you won't have to change your existing markup (as you said changing to textarea is not possible for you). Just inject a little Javascript / jQuery and viola you get the functionality of textareausing actual textarea.

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

One sample demo using Javascript is above. Another sample demo using jQuery is here: http://jsfiddle.net/abhitalks/xqrfedg2/

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

And a simple snippet:

还有一个简单的片段：

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

回答by Vlad

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

This would be the HTML, the only downside to this is that the input would submit HTML. Take this for example..

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

Lorem ipsum Dolores amet

Lorem ipsum Dolores amet

would submit like this: Lorem ipsum <br> Dolores amet

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

Here's a codepen: http://codepen.io/pacMakaveli/pen/MYYOZW

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

回答by Swapnil Motewar

Why don't you use Textarea tag like

你为什么不使用 Textarea 标签

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

The "input" tag doesn't support rows and cols attributes. This is why the best alternative is to use a textarea with rows and cols attributes. You can still add a "name" attribute and also there is a useful "wrap" attribute which can serve pretty well in various situations.

“输入”标签不支持行和列属性。这就是为什么最好的选择是使用具有行和列属性的文本区域。您仍然可以添加“名称”属性，并且还有一个有用的“包装”属性，它可以在各种情况下很好地发挥作用。

There is no meaning for giving height to input tag for reference

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

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

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

回答by user3351229

You can't make an input[type=text]work as a <textarea>. Because only HTML form element that's designed to be multiline is textarea.

你不能把input[type=text]作品作为<textarea>. 因为只有被设计为多行的 HTML 表单元素才是 textarea。

回答by artm

Would something like this http://jsfiddle.net/710u7qns/work? You'd need to treat "Enter" as new line on the back end.

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

html:

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:

JS：

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