如何使input [type = text]元素用作textarea？ [英] How can make an input[type=text] element to work as textarea?

问题描述

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

解决方案

如此处回答：

多个输入类型为< input type = text的输入行。 />

事实证明，添加css属性 word-break：break-word; 使其表现出更多所需的效果。
我做了一个快速测试，它确实起作用。

请当心，请注意， textarea 是 input [type = text] 不能做到的。但这是一个开始！

演示

  input {height：500px;宽度：500像素；断字：断字；}  

 < input type = text>  

这将仅允许文本在碰到右边框时流到下一行，但是它不允许您使用return键开始新行，并且文本在输入中居中居中。

---

如果可以选择使用JavaScript，那么尝试扭转不良的输入的手臂直到它一样有趣。表现为 textarea ，解决问题的最佳方法是显示实际的 textarea ，隐藏文本输入，并使两者与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 /

还有一个简单的代码段：

  $（ 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>名称：< / label>< input id = txt1 type = text /&g t;< br />< br /><标签>地址：< / label><输入id = txt2 type = text class = convert value =此处的地址。  />< hr />< a id = go href =＃> Convert< / a>  

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.

解决方案

As answered here:

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

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

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 input and keep both in sync with javascript. Here is the fiddle:

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

---

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

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 textarea using actual textarea.

One sample demo using Javascript is above. Another sample demo using jQuery is here: 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>

这篇关于如何使input [type = text]元素用作textarea？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！