Geek asks and answers

Change event does not fire when key is returned

I have a text box with an associated event with jQuery change.

$('#txtAccountNo').change(function(){
        $('label[for="txtAccountNo"]').append('<span class="support">loading...</span>')
    });

The event fires when the text field loses focus, i.e. the user clicks it or uses the tab key. But when the return key is pressed, the event does not fire. Can someone help me resolve this please?

+5
source share
4 answers

This is the standard behavior for an event change. If you want to capture every click Enter, you need to use the event keypress:

$('#txtAccountNo')
    .change(function(){
        $('label[for="txtAccountNo"]').append('<span class="support">loading...</span>')
    })
    .keypress(function(e) {
        if ((e.keyCode || e.which) == 13) {
            $('label[for="txtAccountNo"]').append('<span class="support">loading...</span>')
        }
    });
+5
source

As you highlighted, an event is changefired only when text is entered into focus. Instead, bind to keyup:

$('#txtAccountNo').on('keyup', function() { 
    $('label[for="txtAccountNo"]').append('<span class="support">loading...</span>')
});

- script , , change, , , , - . , :

$('#txtAccountNo').on('keyup change', function() { ... });
+3

jQuery (, , ) , 1,7, , .

<input/><output/>
$("input").change( function() {
    $("output").val( $("input").val() );
})

: http://jsfiddle.net/4vBSm/2/

IE 9 . ( jQuery http://bugs.jquery.com/ticket/11556)

+1

As noted in Matthew's answer, the problem occurs in IE9 and earlier, but not in modern browsers. I would suggest below a solution that simply adds this feature to all browsers:

$('input[type=text]').on('keypress', function (e) {
    var $input = $(this);
    if (e.which == 13) { // Enter was hit
        $input.trigger('change');
    }
});

It listens for keystrokes on text inputs, and if Enterpressed, it fires a change event.

+1
source

More articles:


All Articles