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.
To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. Explanation: We use the jQuery event. which to check the keycode on the keypress.
To submit a form using the Enter key in React: Add a button element with type set to submit . Add an onSubmit prop that points to a submit handler function. Every time the user presses Enter, the handle submit function will be invoked.
The <textarea> tag defines a multi-line text input control. The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The HTML textarea tag is used to make a text input field with multiple lines in a form. It is defined with the <textarea> tag and can hold an unlimited number of characters.
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(); } });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With