如何在文本區域中按 Enter 時提交表單

Question

如何通過在<textarea>中按enter而不是按<input type="submit">按鈕來提交表單？

<HTML>
    <BODY>
        <FORM ACTION="MyInserts.php"  METHOD="GET">
            firstname:  <TEXTAREA NAME="firstbox"></TEXTAREA><BR>
            <INPUT TYPE="submit" Value="send">
        </FORM>
</HTML>

Answer 1

如果您想在用戶在<textarea>上按下ENTER時提交<form> ，您應該為其分配一個onKeyDown事件處理程序，並在檢測到按下ENTER時使用 javascript 手動提交表單：

<html>
    <head>
        <script>
        function pressed(e) {
            // Has the enter key been pressed?
            if ( (window.event ? event.keyCode : e.which) == 13) { 
                // If it has been so, manually submit the <form>
                document.forms[0].submit();
            }
        }
        </script>
    </head>
    <body>
        <form action="MyInserts.php">
        <textarea onkeydown="pressed(event)"></textarea>
        </form>
    </body>
</html>

看到它在這個JSFiddle 中工作。

Answer 2

如果你正在閱讀這個問題，因為2020年和我一樣，試圖用打字稿使用它，你可能知道，打字稿會告訴你， e.keyCode或e.which被depricated！

所以你可以使用e.key ，它會給你被按下的鍵的確切字符串，就像它會給你Enter來按下回車按鈕，或者它會給你ctrl來按下控制 btn，所以希望你得到主意！

此外，如果您想編寫一個函數將其轉換為獲取關鍵代碼的舊方法，您可以使用以下內容：

switch (theChar) {
    case "Backspace":
      return 8;
    case "Tab":
      return 9;
    case "Enter":
      return 13;
    case "Alt":
      return 18;
    case "Escape":
      return 27;
    case "Delete":
      return 127;
    case "Minus":
      return 45;
    case "Plus":
      return 43;
    case "Equal":
      return 61;
    case "Delete":
      return 127;
    case "BracketRight":
      return 93;
    case "BracketLeft":
      return 91;
    case "Backslash":
      return 92;
    case "Slash":
      return 47;
    case "Semicolon":
      return 59;
    case "Colon":
      return 58;
    case "Comma":
      return 44;
    case "Period":
      return 46;
    case "Space":
      return 32;
    case "Quote":
      return 34;
    case "Backquote":
      return 39;

    //there are also "Numpad....." variants

    case "Unidentified":
      alert("handle the 'Unidentified' if you want to!");
  }

這里還有許多其他可能的字符值，但是，AFAIK，它們沒有 unicode 代碼點，例如：

switch (theKey) {
    case "AltLeft":
    case "CapsLock":
    case "ControlRight":
    case "Fn":
    case "NumpadDecimal":
    ...

event.which 可能會為它們輸出一些數字，但它在瀏覽器/機器之間不一致，並且它們可能與其他代碼點重疊。

Answer 3

現在覆蓋從textarea提交的 Enter 鍵的最簡單方法是向 textarea 元素添加一個事件偵聽器並使用event.key作為 @amdev 建議

document.getElementsByTagName('textarea')[0].addEventListener("keydown", function(event){
  if (event.key == 'Enter') {
    event.preventDefault();
    document.forms[0].submit();
  }
});

您還需要阻止默認鍵操作，或者您將在提交的數據中包含返回行

如何在文本區域中按 Enter 時提交表單

問題描述

3 個解決方案

解決方案1
3 2013-02-05 16:14:08

解決方案2
1 2020-11-10 00:21:38

解決方案3
0 2022-04-07 03:05:46

如何在文本區域中按 Enter 時提交表單

問題描述

3 個解決方案

解決方案1 3 2013-02-05 16:14:08

解決方案2 1 2020-11-10 00:21:38

解決方案3 0 2022-04-07 03:05:46

解決方案1
3 2013-02-05 16:14:08

解決方案2
1 2020-11-10 00:21:38

解決方案3
0 2022-04-07 03:05:46