How to make "Enter" key in a textarea submit a form
HtmlFormsHtml Problem Overview
I have a chat that uses textarea instead of text for obvious reasons. This is why each time members hit ENTER they get a new line instead of sending the message. I would like to change this, so every time they hit ENTER =the message to be submitted and then the cursor to return on textarea for their next message typing. I've tried different codes found on this site, most didnt work and those who seemed to do something were just refreshing the page and i got a blank page.
My code:
<form name="message" action="">
<textarea name="usermsg" autocomplete="off" type="text" id="usermsg" rows="4" cols="30" style="width: 450px; margin-left: 25px;">
</textarea>
<br/>
<p style="margin-left: 420px;"><input name="submitmsg" type="submit" id="submitmsg" value="Send" /></p>
</form>
Thank you very much for your time.
Html Solutions
Solution 1 - Html
Try this (note that pressing Enter submits, and Shift+Enter adds a new line).
$("#textareaId").keypress(function (e) {
if(e.which === 13 && !e.shiftKey) {
e.preventDefault();
$(this).closest("form").submit();
}
});
Solution 2 - Html
Vanilla JavaScript solution
function submitOnEnter(event){
if(event.which === 13){
event.target.form.dispatchEvent(new Event("submit", {cancelable: true}));
event.preventDefault(); // Prevents the addition of a new line in the text field (not needed in a lot of cases)
}
}
document.getElementById("usermsg").addEventListener("keypress", submitOnEnter);
If you would prefer to not submit if Shift is clicked all you need to do is change line 2 to:
if(event.which === 13 && !event.shiftKey){
To clear the textarea just add this inside the if statement body
event.target.value = "";
To use this with Internet Explorer 11 change line 3 to:
var newEvent = document.createEvent("Event");
newEvent.initEvent("submit", false, true);
event.target.form.dispatchEvent(newEvent);
> But wait? Why not use event.target.form.submit();
?
When you invoke the submit method of the form the event listeners will not be called.
Demo:
function submitOnEnter(event){
if(event.which === 13){
event.target.form.dispatchEvent(new Event("submit", {cancelable: true}));
event.preventDefault(); // Prevents the addition of a new line in the text field (not needed in a lot of cases)
}
}
document.getElementById("usermsg").addEventListener("keypress", submitOnEnter);
document.getElementById("form").addEventListener("submit", (event) => {
event.preventDefault();
console.log("form submitted");
});
<form id="form">
<textarea id="usermsg"></textarea>
<button type="Submit">Submit</button>
</form>
Solution 3 - Html
I have created a jsfiddle with an example on how to do it with jQuery and the keypress
function and which
property: http://jsfiddle.net/GcdUE/
Not sure exactly what you are asking for more than this, so please specify your question further if possible.
$(function() {
$("#usermsg").keypress(function (e) {
if(e.which == 13) {
//submit form via ajax, this is not JS but server side scripting so not showing here
$("#chatbox").append($(this).val() + "<br/>");
$(this).val("");
e.preventDefault();
}
});
});
Solution 4 - Html
Well, supposing you were using jquery it would be a simple listener on your input field:
In your footer before </body>:
<script type="text/javascript">
$(document).ready(function(){
$('#usermsg').keypress(function(e){
if(e.which == 13){
// submit via ajax or
$('form').submit();
}
});
});
</script>
In your html head add this:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
but if js or jquery is out of the question then perhaps update your question to specifically exclude it.
Solution 5 - Html
function KP()
{
var x = event.keyCode;
if(x==13)
{
// alert (x);
document.message.submit();
}
}
php
echo '<textarea name="usrMsg" id="usrMsg" OnKeyPress="KP();">'txt'</textarea>';
Solution 6 - Html
Use <input type=text>
instead of <textarea>
. Then you have much better chances. In textarea
, hitting Enter is supposed to mean a line break in text, not submission of text.