jquery comment attraper la touche Entrée et changer d’événement en onglet
Je veux une solution JQuery, je dois être proche, que faut-il faire?
$('html').bind('keypress', function(e)
{
if(e.keyCode == 13)
{
return e.keyCode = 9; //set event key to tab
}
});
Je peux retourner false et empêcher la touche Entrée d'être enfoncée. Je pensais pouvoir changer le code clé en 9 pour le rendre tabulé, mais cela ne semble pas fonctionner. Je dois être proche, que se passe-t-il?
$('input').on("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
Cela fonctionne parfaitement!
$('input').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $(this).closest('form').find(':input:visible');
inputs.eq( inputs.index(this)+ 1 ).focus();
}
});
Pourquoi pas quelque chose de simple comme ça?
$(document).on('keypress', 'input', function(e) {
if(e.keyCode == 13 && e.target.type !== 'submit') {
e.preventDefault();
return $(e.target).blur().focus();
}
});
De cette façon, vous ne déclenchez pas la soumission sauf si vous vous concentrez déjà sur le type de saisie "soumettre", et cela vous place exactement là où vous l'avez laissée. Cela le fait également fonctionner pour les entrées qui sont ajoutées dynamiquement à la page.
Remarque: le flou () est situé devant le focus () pour toute personne susceptible d'avoir un écouteur d'événement "sur flou". Il n'est pas nécessaire que le processus fonctionne.
PlusAsTab : Un plugin jQuery pour utiliser le pavé numérique plus comme une clé de tabulation équivalente.
PlusAsTab est également configurable pour utiliser la touche Entrée comme dans cette démo . Voir certaines de mesréponses plus anciennesà cette question .
Dans votre cas, remplacer la touche Entrée par la fonctionnalité d'onglet pour la page entière (après avoir défini la touche Entrée comme onglet dans les options).
<body data-plus-as-tab="true">
...
</body>
Construit à partir du plugin de Ben, cette version gère select et vous pouvez transmettre une option à allowSubmit. c'est à dire. $("#form").enterAsTab({ 'allowSubmit': true}); Ceci permettra à enter de soumettre le formulaire si le bouton d'envoi traite l'événement.
(function( $ ){
$.fn.enterAsTab = function( options ) {
var settings = $.extend( {
'allowSubmit': false
}, options);
this.find('input, select').live("keypress", {localSettings: settings}, function(event) {
if (settings.allowSubmit) {
var type = $(this).attr("type");
if (type == "submit") {
return true;
}
}
if (event.keyCode == 13 ) {
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
idx = -1;
} else {
inputs[idx + 1].focus(); // handles submit buttons
}
try {
inputs[idx + 1].select();
}
catch(err) {
// handle objects not offering select
}
return false;
}
});
return this;
};
})( jQuery );
C'est enfin ce qui fonctionne parfaitement pour moi. J'utilise jqeasyui et cela fonctionne bien
$(document).on('keyup', 'input', function(e) {
if(e.keyCode == 13 && e.target.type !== 'submit') {
var inputs = $(e.target).parents("form").eq(0).find(":input:visible"),
idx = inputs.index(e.target);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus();
inputs[idx + 1].select();
}
}
});
Inclut tous les types d'entrées
$(':input').keydown(function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if (key == 13) {
e.preventDefault();
var inputs = $(this).closest('form').find(':input:visible:enabled');
if ((inputs.length-1) == inputs.index(this))
$(':input:enabled:visible:first').focus();
else
inputs.eq(inputs.index(this) + 1).focus();
}
});
J'ai écrit le code de la réponse acceptée sous la forme d'un plugin jQuery, que je trouve plus utile. (De plus, il ignore maintenant les éléments de formulaire cachés, désactivés et en lecture seule).
$.fn.enterAsTab = function () {
$(this).find('input').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"),
idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
return this;
};
De cette façon, je peux faire $ ('# form-id'). EnterAsTab (); ... Figuré que je posterais car personne ne l'a encore posté en tant que $ plugin et ils ne sont pas totalement intuitifs à écrire.
J'ai pris le meilleur de ce qui précède et ajouté la possibilité de travailler avec n'importe quelle entrée, en dehors des formulaires, etc. En outre, la boucle reprend correctement pour commencer maintenant si vous atteignez la dernière entrée. Et dans le cas d'une seule entrée, elle est floue, puis recentrée sur l'entrée unique pour déclencher les gestionnaires de flou/mise au point externes.
$('input,select').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $('#content').find(':input:visible');
var nextinput = 0;
if (inputs.index(this) < (inputs.length-1)) {
nextinput = inputs.index(this)+1;
}
if (inputs.length==1) {
$(this).blur().focus();
} else {
inputs.eq(nextinput).focus();
}
}
});
Voici ce que j'ai utilisé:
$("[tabindex]").addClass("TabOnEnter");
$(document).on("keypress", ".TabOnEnter", function (e) {
//Only do something when the user presses enter
if (e.keyCode == 13) {
var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
console.log(this, nextElement);
if (nextElement.length)
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
Fait attention au tabindex et n'est pas spécifique au formulaire mais à la page entière.
Notelive a été rendu obsolète par jQuery, vous devriez maintenant utiliser on
Ceci est ma solution, les commentaires sont les bienvenus .. :)
$('input').keydown( function (event) { //event==Keyevent
if(event.which == 13) {
var inputs = $(this).closest('form').find(':input:visible');
inputs.eq( inputs.index(this)+ 1 ).focus();
event.preventDefault(); //Disable standard Enterkey action
}
// event.preventDefault(); <- Disable all keys action
});
Ces solutions ne fonctionnaient pas avec ma grille de données. J'espérais qu'ils le feraient. Je n'ai pas vraiment besoin de Tab ou Entrée pour passer à la prochaine entrée, colonne, ligne ou quoi que ce soit. J'ai juste besoin de Entrée pour déclencher .focusout ou .change et ma grille de données met à jour la base de données. J'ai donc ajouté la classe "enter" aux entrées de texte pertinentes, ce qui a été utile pour moi:
$(function() {
if ($.browser.mozilla) {
$(".enter").keypress(checkForEnter);
} else {
$(".enter").keydown(checkForEnter);
}
});
function checkForEnter(event) {
if (event.keyCode == 13) {
$(".enter").blur();
}
}
Je sais que cette question est plus ancienne que dieu, mais je n'ai jamais vu de réponse aussi élégante.
doc.on('keydown', 'input', function(e, ui) {
if(e.keyCode === 13){
e.preventDefault();
$(this).nextAll('input:visible').eq(0).focus();
}
});
cela semble faire le travail en aussi peu de lignes que possible.
J'avais les mêmes exigences dans mon développement alors j'ai fait des recherches à ce sujet. J'ai lu de nombreux articles et essayé de nombreuses solutions au cours des deux derniers jours, telles que le plugin jQuery.tabNext ().
J'ai eu quelques problèmes avec IE11 (toutes les versions IE ont ce bogue). Lorsqu'un texte saisi suivi d'une saisie non textuelle, la sélection n'était pas effacée. J'ai donc créé ma propre méthode tabNext () basée sur la suggestion de solution @Sarfraz. Je réfléchissais également à la manière dont il devrait se comporter (encerclez uniquement dans le formulaire actuel ou peut-être dans le document complet). Je n'ai toujours pas pris soin de la propriété tabindex principalement parce que je l'utilise occasionnellement. Mais je ne l'oublierai pas.
Pour que ma contribution puisse être utile à tout le monde facilement, j’ai créé ici l’exemple jsfiddle https://jsfiddle.net/mkrivan/hohx4nes/
J'inclus aussi la partie JavaScript de l'exemple ici:
function clearSelection() {
if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox)
document.getSelection().removeAllRanges();
document.getSelection().addRange(document.createRange());
console.log("document.getSelection");
} else if (window.getSelection) { // equals with the document.getSelection (MSDN info)
if (window.getSelection().removeAllRanges) { // for all new browsers (IE9+, Chrome, Firefox)
window.getSelection().removeAllRanges();
window.getSelection().addRange(document.createRange());
console.log("window.getSelection.removeAllRanges");
} else if (window.getSelection().empty) { // maybe for old Chrome
window.getSelection().empty();
console.log("window.getSelection.empty");
}
} else if (document.selection) { // IE8- deprecated
document.selection.empty();
console.log("document.selection.empty");
}
}
function focusNextInputElement(node) { // instead of jQuery.tabNext();
// TODO: take the tabindex into account if defined
if (node !== null) {
// stay in the current form
var inputs = $(node).parents("form").eq(0).find(":input:visible:not([disabled]):not([readonly])");
// if you want through the full document (as TAB key is working)
// var inputs = $(document).find(":input:visible:not([disabled]):not([readonly])");
var idx = inputs.index(node) + 1; // next input element index
if (idx === inputs.length) { // at the end start with the first one
idx = 0;
}
var nextInputElement = inputs[idx];
nextInputElement.focus(); // handles submit buttons
try { // if next input element does not support select()
nextInputElement.select();
} catch (e) {
}
}
}
function tabNext() {
var currentActiveNode = document.activeElement;
clearSelection();
focusNextInputElement(currentActiveNode);
}
function stopReturnKey(e) {
var e = (e) ? e : ((event) ? event : null);
if (e !== null) {
var node = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
if (node !== null) {
var requiredNode = $(node).is(':input')
// && !$(node).is(':input[button]')
// && !$(node).is(':input[type="submit"]')
&& !$(node).is('textarea');
// console.log('event key code ' + e.keyCode + '; required node ' + requiredNode);
if ((e.keyCode === 13) && requiredNode) {
try {
tabNext();
// clearSelection();
// focusNextInputElement(node);
// jQuery.tabNext();
console.log("success");
} catch (e) {
console.log("error");
}
return false;
}
}
}
}
document.onkeydown = stopReturnKey;
J'ai aussi laissé des lignes commentées afin que ma pensée puisse être suivie.
Je sais que c'est assez ancien, mais je cherchais la même réponse et j'ai constaté que la solution choisie n'obéissait pas au tabIndex. Je l'ai donc modifié comme suit, ce qui fonctionne pour moi. Veuillez noter que maxTabNumber est une variable globale contenant le nombre maximal de champs de saisie tabables.
$('input').on("keypress", function (e) {
if (e.keyCode == 13) {
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
var tabIndex = parseInt($(this).attr("tabindex"));
tabIndex = (tabIndex + 1) % (maxTabNumber + 1);
if (tabIndex == 0) { tabIndex = 1; }
$('[tabindex=' + tabIndex + ']').focus();
$('[tabindex=' + tabIndex + ']').select();
return false;
}
});vous devriez filtrer tous les éléments désactivés et en lecture seule . Je pense que ce code ne devrait pas couvrir les boutons
$('body').on('keydown', 'input, select, textarea', function(e) {
var self = $(this),
form = self.parents('form:eq(0)'),
submit = (self.attr('type') == 'submit' || self.attr('type') == 'button'),
focusable,
next;
if (e.keyCode == 13 && !submit) {
focusable = form.find('input,a,select,button,textarea').filter(':visible:not([readonly]):not([disabled])');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
$('input').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input:visible");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
les entrées visibles ne peuvent pas être focalisées.
Voici un plugin jQuery que j'ai écrit et qui gère enter key comme un rappel ou une touche de tabulation (avec un rappel optionnel):
$(document).ready(function() {
$('#one').onEnter('tab');
$('#two').onEnter('tab');
$('#three').onEnter('tab');
$('#four').onEnter('tab');
$('#five').onEnter('tab');
});
/**
* jQuery.onEnter.js
* Written by: Jay Simons
* Cloudulus.Media (https://code.cloudulus.media)
*/
if (window.jQuery) {
(function ($) {
$.fn.onEnter = function (opt1, opt2, opt3) {
return this.on('keyup', function (e) {
var me = $(this);
var code = e.keyCode ? e.keyCode : e.which;
if (code == 13) {
if (typeof opt1 == 'function')
{
opt1(me, opt2);
return true;
}else if (opt1 == 'tab')
{
var eles = $(document).find('input,select,textarea,button').filter(':visible:not(:disabled):not([readonly])');
var foundMe = false;
var next = null;
eles.each(function(){
if (!next){
if (foundMe) next = $(this);
if (JSON.stringify($(this)) == JSON.stringify(me)) foundMe = true;
}
});
next.focus();
if (typeof opt2 === 'function')
{
opt2(me, opt3);
}
return true;
}
}
}).on('keydown', function(e){
var code = e.keyCode ? e.keyCode : e.which;
if (code == 13)
{
e.preventDefault();
e.stopPropagation();
return false;
}
});
}
})(jQuery);
} else {
console.log("onEnter.js: This class requies jQuery > v3!");
}input,
select,
textarea,
button {
display: block;
margin-bottom: 1em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input id="one" type="text" placeholder="Input 1" />
<input id="two" type="text" placeholder="Input 2" />
<select id="four">
<option selected>A Select Box</option>
<option>Opt 1</option>
<option>Opt 2</option>
</select>
<textarea id="five" placeholder="A textarea"></textarea>
<input id="three" type="text" placeholder="Input 3" />
<button>A Button</button>
</form>