在文本区域中按 Enter 时如何提交表单答案

【问题标题】：How to submit a form when pressing Enter in a textarea在文本区域中按 Enter 时如何提交表单
【发布时间】：2013-02-05 15:40:21
【问题描述】：

如何通过在<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>

【问题讨论】：

你需要学习魔术来完成它。顺便说一句，使用小写的 FOR MARKUP，ENTER 可能会在这里工作，你不需要为此使用任何特殊的 javascript
欢迎来到SO，你真的需要改进这个问题。查看常见问题解答stackoverflow.com/faq。
你的意思是 Press Enter 而不是 Click “发送按钮”？
@War10ck action=MyInserts.php
@Mr.Alien 不用担心首席。都好。 :)

标签： javascript html

【解决方案1】：

如果您想在用户在<textarea> 上按ENTER 时提交<form>，您应该为其分配一个onKeyDown 事件处理程序，并使用javascript 手动提交表单当您检测到按下的是 ENTER 时：

<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 中查看它的工作原理。

【讨论】：

@KelvinBala 在您的问题下方有一个名为 edit 的按钮。如果您的评论是为了告诉我们这是您拥有的代码，请使用它进行编辑。
@KelvinBala：您的代码可能存在 XSS 攻击，您应该在打印 $_GET["ident"] 时使用 htmlspecialchars 以避免这种情况。
很抱歉对一个四个月前的帖子发表评论，但您能解释一下(window.event ? event.keyCode : e.which) 以及每个部分的含义吗？为什么我不能只使用e.which？
@user1755043 某些浏览器（例如 IE e.which。而其他浏览器似乎不支持window.event.keyCode。有关更多上下文，请参阅 Tim Down 对javascript event e.which? 的回答。

【解决方案2】：

如果您像我一样在 2020 年阅读此问题并尝试将其与 typescript 一起使用，您可能知道 typescript 会告诉您 e.keyCode 或 e.which 已贬低！ p>

因此，您可以改为使用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!");
  }

还有许多其他可能的字符值here 但是，AFAIK，它们没有 unicode 代码点，例如：

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

event.which 可能会为他们输出一些数字，但它并不一致浏览器/机器，它们可能与其他代码点重叠。

【讨论】：