如何捕获“模糊”或“按键”，请在javascript jquery中输入13-否则不可以

Question

I want to capture "enter" and "blur" on a form field. If I hit "enter" and "tab", it will also trigger the blur event... Only one trigger, so "OR" not "AND.

$('#login-input-password').bind('blur keypress', function(e){
         if (e.type == 'blur' || e.keyCode == 13) {
            // do something only once, not twice
            // e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
         }
    });

answer accepted implemented

FUNCTION usage

function bindTriggerEnterOrBlur(selector,myFunction)
    {
    $(selector).bind('blur keypress', function(e){
        if (e.type == 'blur' || e.keyCode == 13) {
            if (!$(selector).data('has-triggered')) {
                    $(selector).data('has-triggered', true);
                 // do something only once, not twice
                 myFunction();
                // e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
                }
             }
        });

    $(selector).bind('focus', function(e){
            $(selector).data('has-triggered', false);
            $(selector).select();   
        });
    }

CALL to FUNCTION

bindTriggerEnterOrBlur('#login-input-email',submitLoginEmail);

Where submitLoginEmail is the function that does something for the trigger, eg,

function submitLoginEmail()
    {
    // submit on enter...
    var email = $("#login-input-email").val();
    if(validEmail(email))   
        {  
        submitNextLogin(); 
        }
    }

Answer 1

If I am getting your requirement right, you want to execute the callback only once but currently it is getting executed twice.

If that is the case then you will need some way to indicate if the callback has been called already.

One way would be to use data attributes

$('#login-input-password').bind('blur keypress', function(e){
     if (e.type == 'blur' || e.keyCode == 13) {
        if (!$(this).data('done') {
            $(this).data('done', true);
         // do something only once, not twice
        // e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
        }
     }
});

You will also need another event handler to reset the done attribute of the element

$('#login-input-password').bind('focus', function(e) {
    $(this).data('done', false);
});

Answer 2

You are doing an OR. You want a XOR (Exclusive OR), which has to be done using a combination of comparisons.

if (( (e.type == 'blur') && !(e.keyCode == 13)) || 
    (!(e.type == 'blur') &&  (e.keyCode == 13))) {
  // do something only once, not twice
  // e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
}

You want to prevent the script from firing again though, so you'll need to do even more state comparison to make sure your asynchronous event handler knows that the blur or keypress events have occurred and ensure the handler doesn't run twice.

Answer 3

You can also do something like:

var doo = function(e){ console.log("do..."); }

$('#wmd-input').bind('blur', doo);
$('#wmd-input').bind('keypress focus', function(e) {
      $('#wmd-input').off('blur');
    if (e.keyCode == 13) {
        doo(e);
    } else
        $('#wmd-input').bind('blur', doo);
});

And it does bind again when focus happens.