JavascriptJQuery: how to add keypressblur event that doesn't trigger twice with alert box? IE only - Stack Overflow

admin管理员组

文章数量:1406306

I have an input field that I would like to validate on when the user either presses enter or clicks away from it, for this I use the events keypress and blur. If the input fails validation, an alert box is called.

I noticed that in IE (all versions), if I press enter with invalid input, for some reason both the keypress and blur events are fired (I suspect it's the alert box, but it doesn't do this on FF/Chrome) and it shows two of the same alert box. How can I have it so only one is shown?

EDIT: In FF/Chrome, I now noticed that a second alert box appears when I click anywhere after I try to validate with enter.

Simplified code:

$("#input-field").keypress(function(event) {
    if (event.keycode == 13) {
        event.stopPropagation();
        validate();
        return false;
    }
});

$("#input-field").blur(function() {
    validate();
});

function validate() {
    if ($("#input-field").val() == '') {
        alert("Invalid input");
    }
}

EDIT: Ah-ha. Not really a fix but a separate detail I forgot - I need to restore the invalid input to its previously valid value, so when the validate function checks the value again it doesn't fail twice.

I have an input field that I would like to validate on when the user either presses enter or clicks away from it, for this I use the events keypress and blur. If the input fails validation, an alert box is called.

I noticed that in IE (all versions), if I press enter with invalid input, for some reason both the keypress and blur events are fired (I suspect it's the alert box, but it doesn't do this on FF/Chrome) and it shows two of the same alert box. How can I have it so only one is shown?

EDIT: In FF/Chrome, I now noticed that a second alert box appears when I click anywhere after I try to validate with enter.

Simplified code:

$("#input-field").keypress(function(event) {
    if (event.keycode == 13) {
        event.stopPropagation();
        validate();
        return false;
    }
});

$("#input-field").blur(function() {
    validate();
});

function validate() {
    if ($("#input-field").val() == '') {
        alert("Invalid input");
    }
}

EDIT: Ah-ha. Not really a fix but a separate detail I forgot - I need to restore the invalid input to its previously valid value, so when the validate function checks the value again it doesn't fail twice.

• javascript
• jquery
• internet-explorer
• onblur

Share Improve this question Follow edited Nov 7, 2015 at 16:10 Anders 8,6531010 gold badges6060 silver badges9999 bronze badges asked Sep 14, 2011 at 18:22 nicobatunicobatu 1,38733 gold badges1515 silver badges3434 bronze badges 2

• 1 Alerts are bad for validation – epascarello Commented Sep 14, 2011 at 18:25
• @epascarello: Please explain what's so bad about them in a validation context. – Blazemonger Commented Sep 14, 2011 at 18:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I ended up just checking for an IE UserAgent and skipping the keypress event for IE (binding keypress and blur to the same function, as below). Not a direct or terrific solution, tragically, but I've been looking to solve the same problem to no avail. Some minor notes that might be helpful: jQuery normalizes which, so you can confidently use e.which == 13 with keypress. I'd also bine the functions into one bind, e.g.

$("#input-field").bind('blur keypress', function(e) {
    if(e.which == 13) {
        // keypress code (e.g. check for IE and return if so)
    }
    validate();
});

I've tried setting globals and using jQuery's data() to assign arbitrary flags to indicate whether (in your case) validation has already been triggered for the element, but the events trigger simultaneously or at least, if sequentially, rapidly enough that even with an opening line setting some flag to true did not do the trick. I'd read that putting in a tiny callback delay might help, but that is hella dirty and I wouldn't do it even as a workaround so I've not tested it. stopPropagation() and preventDefault() also did not help.

Firefox does not get the keypress event right. Those events are only triggered when a key bination that produces a character is pressed (which is not the same as pressing any key).

Use keydown instead (as this is probably the only event IE handles correctly - as it should, since MS "invented" it ;-) ).

See http://www.quirksmode/dom/events/keys.html.

本文标签：