How to submit a form when pressing Enter in a textarea
Question
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>
3 answers
solution1
3 2013-02-05 16:14:08
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 .
solution2
1 2020-11-10 00:21:38
If you are reading this question as of 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 depricated !
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.
solution3
0 2022-04-07 03:05:46
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.