jQuery BlockUI: Est-il possible d'exécuter une fonction après qu'un utilisateur a appuyé sur la touche "Entrée"?

Question

J'essaye de créer un dialogue modal très minimal et simple qui affiche juste une zone de texte.

Objectifs:

• Si l'utilisateur appuie sur la touche « esc », il disparaitra (et l'entrée de texte est ignoré)
• Si les entrées utilisateur texte et frappe la touche « Entrée », une fonction qui prend l'entrée est exécutée (appelée "postText (userinput)")

Je me demande si je peux utiliser jQuery BlockUI: http://malsup.com/jquery/block/#demos.

Cependant, je ne suis pas sûr de savoir comment fermer réellement une boîte de dialogue basée sur esc, ou exécuter une fonction si l'utilisateur tape Entrée.

Toute aide serait grandement appréciée!

Answer 1

Essayez quelque chose comme ça;

$('#txtValue').keyup(function(e) { 
    e.preventDefault(); 

    if (e.keyCode === 13) { 
     // The Enter key was pressed 
     postText($(this).val()); 
    } 
}); 

Vous devriez jamais comment utiliser l'événement form.submit au lieu d'écouter de la clé enter.

if (e.keyCode === 27) { 
    // The Esc key was pressed 
    $('#dialog').hide(); 
} 

Voir également ces informations pour plus d'informations;

https://stackoverflow.com/search?q=javascript+esc+key

https://stackoverflow.com/search?q=javascript+enter+key

Answer 2

dialogue Fermer le ESC, il suffit d'ajouter un auditeur keyup-document et appeler $.unblockUI si le code clé est égale à 27.

​​$(document).on('keyup', ​​​function(e) { 
    if (e.which === 27) { // Escape key 
    $.unblockUI(); 
    } 
});​ 

Pour la forme, il suffit d'ajouter un écouteur d'événement dans le champ d'entrée dans la boîte de dialogue. C'est fondamentalement la même chose.

​​$('#the-input').on('keyup', ​​​function(e) { 
    if (e.which === 13) { // Enter key 
    // AJAX maybe? 
    $.post('your/url', { data: $(this).val() }, function(response) { 
     $.unblockUI();    
    }); 
    } 
});​ 

Modifier

Vous affectez ces auditeurs après le DOM a été chargé. Ainsi, votre fichier de script chargé contiendra:

$(document).ready(function() { 
    // Code from the two listings above here 

    // Trigger blockUI by click on an link for example 
    $('a').on('click', function(e) { 
     e.preventDefault(); 

     $.blockUI({ message: $('#your-form') }); 
    }); 
}); 

Answer 3

javascript:

("#yourInput").keyup(function(e){ 
    switch (e.keyCode) { 
    case 13: # enter 
    # logic 
    case 27: # esc 
    # logic 
    } 
})