comment contrôler la touche de tabulation beahviour en javascript ou jquery?

Question

disons que nous avons deux zones de texte textbox1 et textbox2

J'ai mon curseur dans la zone de texte 1 et j'appuie sur la touche de tabulation. Le curseur se déplace vers textbox2. Comment puis-je contrôler le comportement de la touche de tabulation dans javascript ou jQuery. Qu'est-ce que je veux faire est le moment où le textbox1 jette événement de mise au point, je veux vérifier une condition (business condition) et basé sur ce que je veux permettre le comportement de la touche de tabulation par défaut ou pointez le curseur là où je veux.

Quelqu'un peut-il me guider comment nous pouvons le faire? Ce que je suppose est le flux ci-dessous de l'événement : appuyez sur la touche de tabulation dans la zone de texte1->textbox1 événement focusout->textbox2 sélectionné. Fondamentalement, je veux un peu de contrôle après l'événement focusout et avant la sélection de textbox2. Je l'ai déjà utilisé événement focusout jQuery, mais ce qu'il fait est, il déclenche l'événement focusout et permet aussi de sélectionner le textbox2, défaisant le but où je veux vérifier pour un certain état avant textbox2 est sélectionné

Answer 1

vous devez d'abord trouver le Keycodetab

$("#findKey").on("keydown", function(event) { 
 
    $("#log").html(event.type + ": " + event.which); 
 
});

<input id="findKey" value="type something"> 
 
<div id="log"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

ensuite, vous pouvez définir une fonction de clic puis définissez la condition

$(document).on('keydown', function(event){ 
 
    if(event.which == 9){ 
 
    alert("now you are clicked tab"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Ou peut-être vous devez changer l'ordre de tabulation est ce que vous avez besoin, vous pouvez utiliser tabindex propriété

Tous les éléments (à l'exception des éléments cachés) sous la forme HTML faites partie de la forme ordre de tabulation. Lorsque l'utilisateur appuie sur la touche de tabulation, le navigateur déplace le focus d'entrée d'élément en élément afin que les éléments apparaissent dans le code HTML. Cependant, vous souhaitez parfois que l'ordre des onglets s'écoule un peu différemment. Dans ce cas, vous pouvez numéroter les champs en utilisant l'attribut tabindex.

Jetez un oeil à l'exemple:

<form> 
 
    Field 1 (first tab selection): 
 
    <input type="text" name="field1" tabindex=1 /><br /> 
 
    Field 2 (third tab selection): 
 
    <input type="text" name="field2" tabindex=3 /><br /> 
 
    Field 3 (second tab selection): 
 
    <input type="text" name="field3" tabindex=2 /><br /> 
 
</form>

L'ordre de tabulation commence par des éléments avec des valeurs explicites tabindex, à partir du plus bas au plus grand nombre. Les étiquettes de même valeur sont sélectionnées dans l'ordre dans lequel elles apparaissent dans le document. Pour exclure un élément de l'ordre de tabulation, définissez la valeur de tabindex sur 0. Dans ce cas, l'élément est ignoré lorsque l'utilisateur parcourt le formulaire.

L'attribut tabindex peut également être utilisé avec <a><textarea><select> et éléments.

s'il vous plaît se référer ces liens

https://msdn.microsoft.com/en-us/library/aa733550(v=vs.60).aspx

https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

Answer 2

Dans votre question, vous mentionnez à la fois onglet en appuyant sur et "le moment textbox1 événement jette focusout".

Vous pouvez le faire avec l'événement blur, vérifiez votre état et, en cas d'échec, refocaliser le contrôle.

En ajoutant une classe, vous pouvez appliquer le même événement à tout contrôle:

$(".required").blur(function(e) { 
 
    if ($(this).val() == "") 
 
     $(this).focus(); // or redirect to any other input 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id='textbox1' class='required'> 
 
<input id='textbox2' class='required'> 
 
<input id='textbox3' class='notrequired'>