admin管理员组

文章数量:1325236

How do I get the form submitted by pressing enter in the <textarea> instead of pressing the <input type="submit"> button?

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

How do I get the form submitted by pressing enter in the <textarea> instead of pressing the <input type="submit"> button?

<HTML>
    <BODY>
        <FORM ACTION="MyInserts.php"  METHOD="GET">
            firstname:  <TEXTAREA NAME="firstbox"></TEXTAREA><BR>
            <INPUT TYPE="submit" Value="send">
        </FORM>
</HTML>
  • javascript
  • html
Share Improve this question edited Feb 5, 2013 at 17:00 Xavi López 27.9k11 gold badges99 silver badges163 bronze badges asked Feb 5, 2013 at 15:40 Kelvin BalaKelvin Bala 972 gold badges2 silver badges11 bronze badges 13
  • 3 You need to learn magic tricks to acplish that..AND BTW USE lowercase FOR MARKUP, and ENTER will probably work here, you don't need to use any special javascript for that – Mr. Alien Commented Feb 5, 2013 at 15:42
  • 1 Wele to SO, you really need to improve this question. Have a look at the faq stackoverflow./faq . – piddl0r Commented Feb 5, 2013 at 15:42
  • 1 You mean Press Enter instead of Clicking on a "Send Button" ? – Ali Bassam Commented Feb 5, 2013 at 15:42
  • 1 @War10ck action=MyInserts.php – Mr. Alien Commented Feb 5, 2013 at 15:46
  • 3 @Mr.Alien no worries chief. All good. :) – War10ck Commented Feb 5, 2013 at 15:53
 |  Show 8 more ments

3 Answers 3

Reset to default 3

If you want to submit a <form> whenever the user presses ENTER on a <textarea>, you should be assigning a onKeyDown event handler to it, and submit the form manually with javascript when you detect it was ENTER that was pressed: 

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

See it working in this JSFiddle.

If you are reading this question post-2020 like me and trying to use it with TypeScript, you probably know that TypeScript will tell you that e.keyCode or e.which is deprecated!

So instead you can use e.key which will give you the exact string of the key that is being pressed like it will give you Enter for pressing the enter button or it will give you ctrl for pressing the control btn, so hopefully you get the idea!

Also if you want to write a function to convert it to the old way of getting the key code you can use something like :

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

There are many other possible character values here but, AFAIK, there are no Unicode code points for them, such as:

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

event.which may output some number for them, but it is not consistent across browsers/machines and they may overlap with other code points.

the simplest way to override the Enter key to submit from textarea now is to add an event listener to the textarea element and use event.key as @amdev suggested

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

You'll also want to prevent the default key action or you will include the line return in the submitted data

本文标签： javascriptHow to submit a form when pressing Enter in a textareaStack Overflow

版权声明：本文标题：javascript - How to submit a form when pressing Enter in a textarea - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742168334a2426244.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。