当焦点不在输入中时，允许在ENTER上提交FORM

Question

I have a form where I have a focusable div using tabindex="0" . Everything works fine, except for the possibility to submit the form on enter key. It does work when the input is focused, but doesn't when the div has the focus.

I know I could use some javascript to capture the enter key and submit the closest form , but are there any other ways to overcome this?

Here is a little fiddle to demonstrate the problem. https://jsfiddle.net/ajqfm3Lb/1/

Answer 1

Well, instead of submitting the "closest form", you could actually check the Enter keypress for any element within that form. I realize that this is somewhat similar to the solution you weren't looking for, but I'm not sure if you're aware that you can tie that keypress event to specifically the form.

Check it out:

https://jsfiddle.net/ajqfm3Lb/9/

$("form").on("keypress", "*:not(textarea)", function(e) {
    if (e.which == 13) {
        alert("submitted");
        return false;
    }
});

This event only fires when a key is pressed while focus is on the form , because the keypress event is only tied to the selector $("form") . The e.which == 13 just checks enter, specifically.

Of course, you could modify $("form") to be any selector (eg, the form's ID, class, etc).

EDIT: As you pointed out, simply listening for the "enter" press on a form would cause issues with elements that require its use, like textarea . I've used Event Delegation to trigger the event on all children of form except textarea .

Let me know how this works.

Answer 2

It's not valid HTML, strictly speaking, but it works... You can put your div inside a <button type="submit"> and remove the button's default styling. Like the other answer that was given, the div must be inside the form for this work without additional JavScript. You'd also no longer need the tabindex on the div.

<form>
<input/>
<button type="submit">
<div>
</div>
</button>
</form>

and

button[type="submit"] {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  display: block;
}

https://jsfiddle.net/g2j2c0ra/2/

Answer 3

Just give your form a name (eg id="test ") and then use the following code to submit only the form with the given id:

$(function(){
 $("#test").keypress(function (e) {
    if (e.keyCode == 13) {
        alert('submitted');
        return false
    }
 });
});