Y a-t-il un événement dans Jquery qui ne se déclenche que si l'utilisateur appuie sur le bouton Entrée dans une zone de texte? Ou tout plugin qui peut être ajouté pour l'inclure? Sinon, comment pourrais-je écrire un plugin rapide qui ferait cela?
Y a-t-il un événement dans Jquery qui ne se déclenche que si l'utilisateur appuie sur le bouton Entrée dans une zone de texte? Ou tout plugin qui peut être ajouté pour l'inclure? Sinon, comment pourrais-je écrire un plugin rapide qui ferait cela?
Réponses:
Vous pouvez câbler votre propre événement personnalisé
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodepour certaines touches, mieux à utiliser e.which, cela garantira que vous gérerez le même bouton sur chaque navigateur
$('#textbox').on('keypress', function (e) {
if(e.which === 13){
//Disable textbox to prevent multiple submit
$(this).attr("disabled", "disabled");
//Do Stuff, submit, etc..
//Enable the textbox again if needed.
$(this).removeAttr("disabled");
}
});Voici un plugin pour vous: (Fiddle: http://jsfiddle.net/maniator/CjrJ7/ )
$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
//use it:
$('textarea').pressEnter(function(){alert('here')})$variable pour le plugin n'est pas une bonne idée car elle peut provoquer des conflits.
$("#myInput").bind('click, onEnter', myCallback);et que cela fonctionne sans avoir besoin d'autre chose?
voici un plugin jquery pour le faire
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);pour l'utiliser, incluez le code et configurez-le comme ceci:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this), de cette façon, dans la fonction de rappel, vous pouvez utiliser thisnormalement pour accéder à l'élément sur lequel l'événement a été déclenché.
e.preventDefault(); e.stopPropagation();intérieur du if (e.keyCode)bit.
Il convient de noter que l'utilisation de live()dans jQuery est déconseillée depuis la version 1.7et a été supprimée dans jQuery 1.9. Au lieu de cela, l'utilisation de on()est recommandée.
Je suggérerais fortement la méthodologie suivante pour la liaison, car elle résout les défis potentiels suivants:
document.bodyet en passant $ selector comme deuxième argument on(), les éléments peuvent être attachés, détachés, ajoutés ou supprimés du DOM sans avoir à gérer les événements de nouvelle liaison ou de double liaison. En effet, l'événement est attaché à document.bodyplutôt que $selectordirectement, ce qui signifie qu'il $selectorpeut être ajouté, supprimé et ajouté à nouveau et ne chargera jamais l'événement qui lui est lié.off()avant on(), ce script peut vivre soit dans le corps principal de la page, soit dans le corps d'un appel AJAX, sans avoir à vous soucier d'événements double-liaison accidentels.$(function() {...}), ce script peut à nouveau être chargé soit par le corps principal de la page, soit dans le corps d'un appel AJAX. $(document).ready()n'est pas renvoyé pour les requêtes AJAX, alors qu'il le $(function() {...})fait.Voici un exemple:
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $selector = $('textarea');
// Prevent double-binding
// (only a potential issue if script is loaded through AJAX)
$(document.body).off('keyup', $selector);
// Bind to keyup events on the $selector.
$(document.body).on('keyup', $selector, function(event) {
if(event.keyCode == 13) { // 13 = Enter Key
alert('enter key pressed.');
}
});
});
</script>
</head>
<body>
</body>
</html>Si votre entrée est search, vous pouvez également utiliser l' on 'search'événement. Exemple
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});Code HTML:-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">Code de script Java
function AddKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById('btnEmail').click();
return false;
}
return true;
}Votre formulaire n'a pas de bouton d'envoi par défaut
Une autre variation subtile. J'ai opté pour une légère séparation des pouvoirs, j'ai donc un plugin pour activer la capture de la touche entrée, puis je me lie simplement aux événements normalement:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);Et puis en cours d'utilisation:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });Cette variante vous permet d'utiliser la délégation d'événements (pour vous lier à des éléments que vous n'avez pas encore créés).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });Je n'ai pas pu keypressdéclencher l' événement pour le bouton Entrée, et je me suis gratté la tête pendant un certain temps, jusqu'à ce que je lise les documents jQuery:
" L'événement keypress est envoyé à un élément lorsque le navigateur enregistre la saisie au clavier. Il est similaire à l'événement keydown, sauf que le modificateur et les touches non imprimantes telles que Shift, Esc et suppriment les événements keydown de déclenchement mais pas les événements keypress. " ( https://api.jquery.com/keypress/ )
J'ai dû utiliser l' événement keyupou keydownpour attraper une pression sur le bouton Entrée.