firefox autocomplete 'enter' keypress on autocomplete triggering enter on textbox

Question

I have a form with some common fields like "email". I have javascript that catches the return key (13) and submits the form, but the same effect was observed when using the defaultButton property on the host panel.

If the user is on IE and is typing his email address, then selects an item from the browser's inline autocomplete by pressing ENTER, no keypress is sent to Javascript. GOOD.

On Firefox however, the textbox receives the ENTER keypress and wants to submit the form, which is not complete.

Does anyone know how to stop this other than disabling autocomplete? I can't figure out a way to detect that the keypress is actually originating from the auto complete listbox.

I'm using asp.net and jQuery.

Edit - to clarify: Pressing enter on an item in autocomplete should NOT submit the form. The IE behavior is correct (for once!).

My event handler in itself is simply:

on key up (tried keypress too) - if(e.which == 13) submitForm();

Problem is, I don't know how to detect that the ENTER press actually came from the autocomplete control

Could this help you? http://stackoverflow.com/questions/270494/enter-button-does-not-submit-form-ie-only-asp-net — Niklas, Feb 24 '12 at 13:38
I think the problem stems from e handler. The first comment you can help. — Sinan AKYAZICI, Feb 24 '12 at 13:43
can you show the javascript that hold the enter. The keys are handle different on the browsers — Aristos, Feb 24 '12 at 14:02
I think i'm not being clear. the IE behavior is correct. The incorrect behavior is that on Firefox, if I hit enter to select an autocomplete entry it also submits the form. Please see my edit. — Kir, Feb 24 '12 at 14:13

Marcus · Accepted Answer · 2013-03-06T15:50:03.603

You could store the value of the field on key down, and then check again on key up. If more than 1 character is different in the string from one key press, it's safe to assume that an autocomplete item was selected and enter should be ignored.

The only case where this wouldn't work is when you have a field like: email@test.co and you are selecting an autocomplete item with only the final letter added, the enter key would submit the form unintentionally.

Hope that gets us started at least. I am trying to sort out a bulletproof solution as well. I will update if I find one.

EDIT

Screw above. Sorted it out. If you check for the enter key on key up, and the input field value isn't the same on both key down/up, you can assume an autocomplete item was selected.

var loginCurrentInput = '';

$('input').keydown(function(e) {

  loginCurrentInput = $(this).val();

}

$('input').keyup(function(e) {

  //if enter key pressed
  if(e.keyCode == 13) {

    //check for changed input value
    if($(this).val() != loginCurrentInput) {

      loginCurrentInput = $(this).val();
      return false;

    }

    $('#button').trigger('click');

  }

}

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

On enter key press, you can check what is current element on focus:

$("*:focus")

if the element is not with outocomplete attached then you can make your form submit. take a look on: How to select an element that has focus on it with jQuery

edited May 23 '17 at 12:24

Community

1
1

answered Jan 17 '13 at 19:30

ncn corp

113
5

score 0 · Answer 3 · answered May 24 '20 at 19:03

There are two (clean) tricks you can use:

1.) [Enter] does not generate an input event …

2.) with autocomplete keydown and keyup are "synchonous"

Solution ( I combine both):

on [enter] keydown expect a true key hit (true_enter=true) and "setTimeout" (0 delay!) the submitting where you check if it is still a true_enter

On keyup and input clear true_enter=false

Explanation:

With autocomplete, keydwon and keyup are synchronous or - when queued - directly behind; the same to keydwon and input events

With setTimeout you put your enter-action behind these events.

A true key hit is (almost) never so fast to achieve that. I had a 1 of 20 ratio, trying hard.

Drawback:

An automatik testing will have problems.

My Solution in coffeescript: (sorry my javascript is bad)

        .on_key("enter", =>             # is what it sounds like
            @true_enter=true
            @defer  =>                  # setTimeout
                if @true_enter
                    #submit ...

        .on("keyup input",  =>
            @true_enter=false
        )

firefox autocomplete 'enter' keypress on autocomplete triggering enter on textbox

3 Answers3