How to submit a form on enter when the textarea has focus?

HtmlForms

Html Problem Overview


When filling out a form's textarea, the default behavior when the enter key is hit is to move to the next line. How can I change the behavior of the form so it will submit upon user hitting enter even when the user is in a textarea?

I used Firebug to checkout Stack Overflow's comment textarea (which has this behaviour), but couldn't see any JavaScript that achieved this affect. Is there a way to change the behavior of the textarea without using JavaScript?

Html Solutions


Solution 1 - Html

You can't do this without JavaScript. Stackoverflow is using the jQuery JavaScript library which attachs functions to HTML elements on page load.

Here's how you could do it with vanilla JavaScript:

<textarea onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }"></textarea>

Keycode 13 is the enter key.

Here's how you could do it with jQuery like as Stackoverflow does:

<textarea class="commentarea"></textarea>

with

$(document).ready(function() {
    $('.commentarea').keydown(function(event) {
        if (event.which == 13) {
            this.form.submit();
            event.preventDefault();
         }
    });
});

Solution 2 - Html

<form id="myform">
    <input type="textbox" id="field"/>
    <input type="button" value="submit">
</form>

<script>
    $(function () {
        $("#field").keyup(function (event) {
            if (event.which === 13) {
                document.myform.submit();
            }
        }
    });
</script>

Solution 3 - Html

Why do you want a textarea to submit when you hit enter?

A "text" input will submit by default when you press enter. It is a single line input.

<input type="text" value="...">

A "textarea" will not, as it benefits from multi-line capabilities. Submitting on enter takes away some of this benefit.

<textarea name="area"></textarea>

You can add JavaScript code to detect the enter keypress and auto-submit, but you may be better off using a text input.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionandrewView Question on Stackoverflow
Solution 1 - HtmlBalusCView Answer on Stackoverflow
Solution 2 - HtmlEric FortisView Answer on Stackoverflow
Solution 3 - HtmljthompsonView Answer on Stackoverflow