javascript - Simulate enter-key in form field and preserve other handlers - Stack Overflow

admin管理员组

文章数量:1327065

We're trying to make a generic approach for a piece of software we are developing that ties into form fields.

So far so good but we're running in to an edge case that prevents submitting a form/field that has another handler tied in to it.

Here's the (condensed) use case:

HTML:

<form id="form1">
  <input type=field id="field1"/>
</form>
<a href="#" id="link">click to submit</a>

Normal behaviour is that when a user types 'foo' into the field and hits enter, the form is handled and submitted to the correct 'endpoint' which isn't necessarily the defined one in the form's opening tag. There could be some function (from somewhere else) that handles this enter-event.

Unfortunately, we can't predict what that function is, we like to keep it generic.

In the above HTML, clicking on the link should trigger an enter-event on the form field that mimics the browser/user behaviour and thus some unknown handler.

This is our Javscript (we're using jquery):

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    console.log("enter pressed");
    //return false; only if needed
  }
});

$( "#link" ).click(function() {
  var e = jQuery.Event('keypress');
  e.which = 13; // #13 = Enter key
  $("#field1").focus();
  $("#field1").trigger(e);
})

When entering 'foo' in the field and pressing enter the form gets submitted. But when we click the link we do a focus() and then firing the key-event but the form isn't submitted.

We can't use a submit() because of the unknown handlers.

Try the code here:

We're trying to make a generic approach for a piece of software we are developing that ties into form fields.

So far so good but we're running in to an edge case that prevents submitting a form/field that has another handler tied in to it.

Here's the (condensed) use case:

HTML:

<form id="form1">
  <input type=field id="field1"/>
</form>
<a href="#" id="link">click to submit</a>

Normal behaviour is that when a user types 'foo' into the field and hits enter, the form is handled and submitted to the correct 'endpoint' which isn't necessarily the defined one in the form's opening tag. There could be some function (from somewhere else) that handles this enter-event.

Unfortunately, we can't predict what that function is, we like to keep it generic.

In the above HTML, clicking on the link should trigger an enter-event on the form field that mimics the browser/user behaviour and thus some unknown handler.

This is our Javscript (we're using jquery):

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    console.log("enter pressed");
    //return false; only if needed
  }
});

$( "#link" ).click(function() {
  var e = jQuery.Event('keypress');
  e.which = 13; // #13 = Enter key
  $("#field1").focus();
  $("#field1").trigger(e);
})

When entering 'foo' in the field and pressing enter the form gets submitted. But when we click the link we do a focus() and then firing the key-event but the form isn't submitted.

We can't use a submit() because of the unknown handlers.

Try the code here: http://codepen.io/conversify/pen/yOjQob

• javascript
• jquery
• html
• forms

Share Improve this question Follow asked Apr 18, 2016 at 10:35 unicorn80unicorn80 1,21722 gold badges1010 silver badges1515 bronze badges 5

• So you want both pressing the Enter key and clicking on the link to invoke the unknown handler? – Ionian316 Commented Apr 20, 2016 at 18:10
• I'm not quite understanding what you're looking for. Are you saying you want the form to submit every time someone clicks "Enter" but without using submit()? – Chris Stanley Commented Apr 20, 2016 at 18:11
• No, clicking 'click to submit' should submit the form just like pushing 'enter'. Try filling in 'foo' and clicking the link. Thats should have the same effect as filling in 'foo' and hitting enter. – unicorn80 Commented Apr 20, 2016 at 18:48
• @unicorn80 - They both have the same effect for me. Whether I click the button/link, or hit enter, the form is submitted. – mferly Commented Apr 20, 2016 at 18:57
• @Marcus which browser? Clicking the link doesn't submit the form in Chrome (for me at least) – unicorn80 Commented Apr 21, 2016 at 6:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

What happens when enter key is pressed is, if the input is inside a form, the form is submitted. This is the default behavior. When you simulate a key press, you should do the same, unless the default behavior is prevented.

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    console.log("enter pressed");
    // event.preventDefault(); if needed
  }
});

$( "#link" ).click(function() {
  var e = jQuery.Event('keypress');
  e.which = 13; // #13 = Enter key
  $("#field1").focus();
  $("#field1").trigger(e);
  var form=$("#field1").closest("form");
  if(form&&!e.isDefaultPrevented()) form.submit();
})

Now you can pass your event object to the handlers and they can prevent the submit if they want so, or you can prevent it in your keypress handler.

You should separate out the form handler from the enter and click handlers.

var formHandler = function(e) {
  // ... code to submit form ...
  console.log("form handled"); 
};    

Then set your keypress handler like this:

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    formHandler();
  }
});

And your click handler like this:

$( "#link" ).click(function() {
  formHandler();
});

You can unbind the unknown handlers using unbind('submit') and then use submit() like following.

$("#link").click(function () {
    $("#form1").unbind('submit').submit();
});

本文标签： javascriptSimulate enterkey in form field and preserve other handlersStack Overflow