當我按下回車鍵時，如何擴展textarea的新行？

假設我有一個正常文本框的大小的textarea，當按下輸入或crtl +時，如何使其可伸縮，以輸入用戶輸入的新行。當我按下回車鍵時，如何擴展textarea的新行？

例如，我在第一行的textarea中鍵入東西，然後我按回車鍵，textarea將爲我輸入數據的新行。

<td> 
    <textarea rows="5" cols="50" name="description[]"> 
     <?php echo $row[ 'description']; ?> 
    </textarea> 
</td>

以上是我提到的textarea。

來源

2013-08-29 nickee

您必須使用javascript。具體來說，你可以使用一個名爲jQuery的JavaScript框架。看看這個答案：Auto expand a textarea using jQuery

來源

2013-08-29 01:39:49 htxryan

如果可以使用jQuery來完成，則可以使用javascript – dc5

@ dc5來完成。我並不是想暗示jQuery本身是必需的。我會編輯我的答案，以便更清楚。 – htxryan

如果它可以使用JavaScript來完成，那麼可以用更少的時間/代碼行來完成，使用jQuery – hammus

你可以嘗試一些jQuery的：

$("textarea").keyup(function(e) { 
    if(e.keyCode == 13) //13 is the ASCII code for ENTER 
     { 
      var rowCount = $(this).attr("rows"); 
      $(this).attr({rows: rowCount + 5}); 
     } 
});

來源

2013-08-29 01:42:26 hammus

我應該在哪裏放入這些代碼？ – nickee

http://stackoverflow.com/a/5346855/2716915 這項工作對我來說:) 雖然它是一個很長的代碼，但我想我理解工作流程。謝謝大家:) – nickee

或者 - 您可以使用一個div CONTENTEDITABLE設置爲true。

<td> 
    <div id="description[]" contenteditable="true"> 
    <?php echo $row['description']; ?> 
    </div> 
</td> 
<input name="description[]" type="hidden" value="">

然後添加一個JS函數的形式提交（假設這是一個形式），隱藏的輸入的值設置到div的內部文本/內容

function updateText() { 
    content = document.getElementById('description[]').textContent || document.getElementById('description[]').innerText; 
    document.querySelector('[name="description[]"]').value = content; 
}

來源

2013-08-29 01:47:09

退房這個自動增長的jQuery插件 - https://github.com/akaihola/jquery-autogrow

來源

2013-08-29 01:48:36

當我按下回車鍵時，如何擴展textarea的新行？

回答

相關問題