empêche la publication de la fonction liée à jquery

Question

Je tente d'exécuter du code javascript lorsque la touche 'Entrée' est enfoncée alors que le focus est sur une zone de texte particulière. Si cela se produit, je ne veux pas que la page soit publiée. (Cependant, si quelqu'un clique le bouton Soumettre, puis je veux la page postback comme il le ferait normalement.)

J'ai une page avec le contenu suivant:

<script type="text/javascript"> 
$(function() { 
    $('#txtInput').on('keyup', function (e) { 
     if (e.keyCode == 13) { 
      alert('enter was clicked'); 
      return false; 
     } 
    }); 
}); 
</script> 

<asp:TextBox ID="txtInput" runat="server" ClientIDMode="Static"></asp:TextBox> 
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmitClick" Text="Submit" /> 

J'ai toujours pensé que return false; était le moyen d'accomplir cela, mais dans ce scénario, cela ne fonctionne pas.

J'ai également essayé ce qui suit dans ma fonction javascript, en vain.

$(function() { 
    $('#txtInput').on('keyup', function (e) { 
     if (e.keyCode == 13) { 
      e.cancel = true; 
      e.returnValue = false; 
      alert('enter was clicked'); 
     } 
    }); 
}); 

Mes questions sont les suivantes:

1. Pourquoi pas ce travail?

2. Comment puis-je obtenir ce comportement?

Answer 1

Vous devez utiliser l'événement de touche car il se produit avant que la touche ne soit relâchée et peut donc être annulée.

Citant le commentaire:

Il est peut-être à cause de l'événement keyup. En théorie, la clé est déjà , donc l'événement est déjà arrivé. Avez-vous essayé avec keypress à la place?

Answer 2

Juste testé, et il ne fonctionne qu'avec les événements keydown, lorsque la clé est relâché, il est trop tard:

$(function() { 
    $('#txtInput').on('keydown', function(e) { 
     if (e.which == 13) e.preventDefault(); 
    }); 
}); 

FIDDLE

Answer 3

Avez-vous essayé d'utiliser e.PreventDefault()? Dans ce cas, vous devrez peut-être également utiliser keydown ou keypress pour intercepter l'événement par défaut.

<script type="text/javascript"> 
$(function() { 
    $('#txtInput').on('keydown', function (e) { 
     if (e.which == 13) { 
      e.PreventDefault(); 
      alert('enter was clicked'); 
     } 
    }); 
}); 
</script> 

Vous devez savoir, cependant, que la fonctionnalité en brisant du clavier, vous n'êtes pas la restauration aux normes d'accessibilité, ce qui peut rendre les choses difficiles pour certains utilisateurs. Assurez-vous que vous fournissez un moyen pour les utilisateurs du clavier uniquement de naviguer.

Modifier: En raison de la nature de votre problème (ASP.NET), vous devrez peut-être aborder cette question différemment.

Vous pouvez soit a) jeter un oeil à cette question: Canceling the default submit button in ASP.NET ou b) appliquer la solution Javascript ci-dessus, mais l'appliquer à l'ensemble du document au lieu de l'élément.

Je ne suggérerais pas le second, car il pourrait casser la fonctionnalité pour les utilisateurs d'accessibility.

Answer 4

function PreventEnterKeyInTextBox(){ 
$('#txtInput').keypress(function(evt){evt=(evt)?evt:window.event; 
if(evt.keyCode==13){ 
    if($.browser.msie) 
     {evt.cancelBubble=true; evt.returnValue=false;} 
    else{evt.preventDefault();} 
}}); 
} 
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PreventEnterKeyInTextBox); 
//Or $(document).ready(function(){PreventEnterKeyInTextBox();});