如何使輸入[type = text]元素作為textarea工作？

Question

我有一個元素input[type=text] ，我想讓它作為textarea元素。 意味着我需要input[type=text]元素的更大高度，並顯示多行，就像textarea元素一樣。 我有一個問題，我不能用textarea代替input[type=text] ，所以我需要一種方法，我可以轉換或使其作為textarea工作。

Answer 1

在這里回答：

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

這將只允許文本在到達右邊框時流向下一行，但它不允許您使用返回鍵開始新行，並且文本在輸入中以verticaly為中心。

---

如果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/

還有一個簡單的片段：

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

這是一個codepen： http ：//codepen.io/pacMakaveli/pen/MYYOZW

Answer 3

為什么不使用Textarea標簽

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

“input”標記不支持rows和cols屬性。 這就是為什么最好的選擇是使用帶有行和列屬性的textarea。 您仍然可以添加“名稱”屬性，還有一個有用的“換行”屬性，可以在各種情況下很好地發揮作用。

給輸入標簽賦予高度以供參考沒有任何意義

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