如何使用textarea作爲輸入？

我充當這樣一個輸入文本框：如何使用textarea作爲輸入？

<div class="control-group"> 
    <label class="required"> 
    Enter stuff here....</label> 
    <input type="text" placeholder="Required Field" class="form-control" id="secid"> 
</div>

我需要在這個意義上，使這個文本框「擴展」，當用戶輸入一些文字比文本框的寬度長，他/她應該可以手動放大該盒子。很像textarea標籤。我該如何做到這一點？

來源

2014-10-08 Core_Dumped

其實這不應該是一個問題，因爲textarea不是一個文本框，因爲香蕉不是一個蘋果。作爲一名開發人員，我們的工作是向那些創造這種需求的人們展示，這在UE等方面並不是必須的。 – Jeredepp 2014-10-08 09:50:03

從一開始就只能使用textarea並且像inbutbox一樣定義它的大小嗎？如果您獲得更多字符，只需將textarea增加到正常大小。 – klml 2014-10-08 10:17:13

@klml在我用textarea標籤替換它之後，不需要輸入標籤嗎？ – 2014-10-08 10:29:16

您應該定義最大字符數，直到輸入將被<textarea />元素動態替換，並且如果用戶刪除字符，再次將輸入轉換爲單行文本框。

來源

2014-10-08 09:49:46

以下是我如何強烈反對它的建議，因爲這是我們決定何時使用textarea和何時使用inputtext的工作的一部分。

var maxnum = 50; 

function checkForReplacementTextarea(){ 
    var content = $('#secid').val(); 
    var strlenght = content.length; 

    if(strlenght>=maxnum){ 
    $('#secid').replaceWith('<textarea id="secid" class="form-control" rows="4" cols="50" onkeydown="checkForReplacementTextarea()">'+content+'</textarea>'); 
    $('#secid').focus(); 
    }else if(strlenght<maxnum){ 
    $('#secid').replaceWith('<input type="text" placeholder="Required Field" value="'+content+'" class="form-control" id="secid" onkeydown="checkForReplacementTextarea()">'); 
    $('#secid').focus(); 
    } 
}

警告：焦點（）在字符串的開頭設置光標，實現光標移動到結束你的文字，你必須清空，關注它後重新填充值。

調用checkForReplacementTextare（）在每次更新你的textarea

<input type="text" onkeydown="checkForReplacementTextarea()">

來源

2014-10-08 09:58:00 Jeredepp

我對Web Dev真的很陌生，所以請原諒我的問題。我用'textarea'標籤取代'input'標記後不需要嗎？ – 2014-10-08 10:26:05

沒有問題，這就是爲什麼我用replaceWith（）函數切換元素，這不是一個漂亮的解決方案，原因有幾個。例如，你操縱（不必要地）DOM方式太多了，而且由於你使用的是id，我必須替換元素，因爲如果我只是隱藏它，我不得不刪除id，因爲你不會能夠訪問第二個elememt。一般來說，我強烈建議我的解決方案。但是這是一種可能性。 – Jeredepp 2014-10-08 11:15:27

原則上可以在input元素上使用CSS屬性resize也是如此，但在實踐中，這是瀏覽器不支持。所以沒有直接的解決方案。

作爲解決方法，您可以添加一個使元素可調整大小的腳本。設計和實現它將取決於你，它將不可避免地與瀏覽器內置的調整textarea大小的工具不同。

或者，你可以通過一個textarea元素替換input元素，並使其單行和可調整大小的水平（只），採用適當的resize，在支持可調整大小的瀏覽器。例如：

<div class="control-group"> 
<label class="required" for="secid"> 
Enter stuff here....</label>  
<textarea type="text" placeholder="Required Field" required 
    class="form-control" id="secid" 
    rows="1" cols="20" wrap="off" 
    style="overflow: hidden; resize: horizontal"> 
</textarea> 
</div>

您可能需要設置字體的家人的，因爲textarea默認使用等寬字體。

這樣做的主要問題是textarea元素仍然是一個多行元素：用戶可以輸入多行，只是最後一行在框中可見。您需要一些JavaScript來阻止這種情況（通過捕獲任何可能爲內容添加換行符的事件）。

來源

2014-10-08 11:30:50

如何使用textarea作爲輸入？

回答

相關問題