Passer d'une zone de texte à l'autre uniquement en appuyant sur le bouton Tab

Question

Généralement, lorsque l'utilisateur visite une page web et appuie sur le bouton TAB du clavier, la sélection se déplace d'un élément à un autre en commençant depuis le début de la page.

Je suis à la recherche d'une solution pour passer entre deux zones de texte particulières en appuyant sur le bouton TAB du clavier avec un focus initial sur la première lorsque la page web est chargée. Tous les autres éléments de la page doivent être ignorés pour cet événement de pression de la touche TAB.

Comment puis-je réaliser cela?

Merci pour votre aide!

\= Mise à jour =

J'ai réussi à le faire fonctionner sous Firefox 12.0. IE et Chrome ne fonctionnent pas correctement. En supposant que les IDs des zones de texte sont #ICCID et #MSISDN, le JQuery ressemble à ceci :

        $(function() {
            $(document).ready(function() {
            $("#ICCID").focus();
            });

            var $inp = $('.cls');

            $inp.bind('keydown', function(e) {
                var key = e.which;
                if (key == 9) {

                    e.preventDefault();
                    var nxtIdx = $inp.index(this) + 1;                  
                    $(".cls:eq(" + nxtIdx + ")").focus();

                //Simuler Enter après TAB
                var textInput = $("#MSISDN").val();
                var lines = textInput .split(/\r|\r\n|\n/);
                if (lines > 1) {

                    $("#MSISDN").on("keypress", function(e) {
                    if (e.keyCode == 9) {
                    var input = $(this);
                    var inputVal = input.val();
                    setTimeout(function() {
                    input.val(inputVal.substring(0,inputVal.length) + "\n");
                          }, 1);
                       }
                    });
                }

                }
                if (key == 9) {

                    e.preventDefault();
                    var nxtIdx = $inp.index(this) - 1;
                    $(".cls:eq(" + nxtIdx + ")").focus();

                //Simuler Enter après TAB
                $("#ICCID").on("keypress", function(e) {
                if (e.keyCode == 9) {
                var input = $(this);
                var inputVal = input.val();
                setTimeout(function() {
                input.val(inputVal.substring(0,inputVal.length) + "\n");
                      }, 1);
                   }
                });

                }
            });
        });

Answer 1

Capturez l'action keydown en utilisant jQuery, déterminez quel textarea a le focus, puis utilisez la méthode focus() pour définir le focus sur l'autre textarea.

Supposons que vos textareas aient l'id="textarea1" et l'id="textarea2". Tout d'abord, vous pouvez définir le focus sur le premier textarea lorsque la page se charge en faisant : $('#textarea1').focus();

$("body").keypress(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    switch(code)
    {
        case 9:
            if($("#textarea1").focus()){
                //Le premier a le focus, passe au deuxième
                $("#textarea2").focus();
            }
            else if($("#textarea2").focus()) {
                //Le deuxième a le focus, passe au premier
                $("#textarea1").focus();
            }

    }
});

Answer 2

D'accord, j'ai trouvé la solution pour ma tâche ! Cela inclut également la simulation de la touche ENTER juste après l'événement de la touche TAB, donc l'utilisateur n'a pas besoin d'appuyer sur ENTER pour passer à la ligne suivante. Testé avec IE9, FF12, Chrome 18.0.x

Voici :

            $(function() {
                $(document).ready(function() {
                $("#ICCID").focus();
                });

                var $inp = $('.cls');

                $inp.bind('keydown', function(e) {
                    var key = e.which;
                    if (key == 9) {

                        e.preventDefault();
                        var nxtIdx = $inp.index(this) + 1;                  
                        $(".cls:eq(" + nxtIdx + ")").focus();

                    //Simuler Enter après TAB
                    var textInput = $("#MSISDN").val();
                    var lines = textInput.split(/\r|\r\n|\n/);
                    if (lines > 1) {

                        $("#MSISDN").on("keyup", function(e) {
                        if (e.keyCode == 9 || e.which == 9) {
                        var input = $(this);
                        var inputVal = input.val();
                        setTimeout(function() {
                        input.val(inputVal.substring(0,inputVal.length) + "\r\n");
                              }, 1);
                           }
                        });
                    }

                    }
                    if (key == 9) {

                        e.preventDefault();
                        var nxtIdx = $inp.index(this) - 1;
                        $(".cls:eq(" + nxtIdx + ")").focus();

                    //Simuler Enter après TAB
                    $("#ICCID").on("keyup", function(e) {
                    if (e.keyCode == 9 || e.which == 9) {
                    var input = $(this);
                    var inputVal = input.val();
                    setTimeout(function() {
                    input.val(inputVal.substring(0,inputVal.length) + "\r\n");
                          }, 1);
                       }
                    });

                    }
                });
            });

Answer 3

Que diriez-vous de ceci.... Je m'ennuie tellement au travail je pense..

http://jsbin.com/uqalej/3/

HTML:

Initialiser
Détruire

JS:

var d = document,
    t1 = d.getElementById("t1"),
    t2 = d.getElementById("t2"),

    nodeType, nodeTypes = [],
    i, iLen,
    y, yLen;

nodeTypes.push( d.getElementsByTagName("textarea") );
nodeTypes.push( d.getElementsByTagName("input") );
nodeTypes.push( d.getElementsByTagName("select") );

i = 0;
iLen = nodeTypes.length;
for ( ; i < iLen; i++ ) {
  nodeType = nodeTypes[i];
  y = 0;
  yLen = nodeType.length;
  for ( ; y < yLen; y++ ) {
    if ( nodeType[y] != t1 && nodeType[y] != t2 ) {
      nodeType[y].onfocus = function() {
        if ( window.toggleBetween )
          t1.focus();
      };
    }
  }
}

Answer 4

Utiliser JavaScript au chargement de la page :

document.getElementById("textarea1").focus();
document.getElementById('textarea1').tabIndex="1";
document.getElementById('textarea2').tabIndex="2";