web-dev-qa-db-fra.com

focus sur le prochain tabindex de l'élément HTML onEnter keypress by JQuery

Hi Friends, Je travaille sur une petite tâche qui doit permettre à l'utilisateur de tabindexer l'élément html lors de la saisie du clavier.

En tant que nouveau sur jQuery, j’ai écrit un code qui me semble que cela fonctionnera, mais il présente quelques problèmes.

Premiers résultats
Le code du coupable, ça ne marche pas, car la sortie dans le labyrinthe du message est "Undefined"

$('*').attr('tabindex').id

enter image description here

Le code est donné ci-dessous et j'ai même créé un JSFiddle .

JQuery

 $(document).ready(function (eOuter) {
    $('input').bind('keypress', function (eInner) {
        if (eInner.keyCode == 13) //if its a enter key
        {
            var tabindex = $(this).attr('tabindex');
            tabindex++; //increment tabindex
            //after increment of tabindex ,make the next element focus
            $('*').attr('tabindex', tabindex).focus();

                       **//Msg Label**
            //Just to print some msgs to see everything is working
            $('#Msg').text( this.id + " tabindex: " + tabindex 
               + " next element: " + $('*').attr('tabindex').id);

            return false; // to cancel out Onenter page postback in asp.net
        }
    });
}
);

HTML

<div>
    Employee Info<br />
    Name<br />
    <input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" />
    <br />
    Age<br />
    <input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" />
    <br />
    Gender<br />
    <select name="DdlGender" id="DdlGender" tabindex="3">
      <option selected="selected" value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <br />
    <div>
        Previous Employment<br />
        <select name="DdlCompany" id="DdlCompany" tabindex="4">
   <option selected="selected" value="0">Folio3</option>
   <option value="1">Null Soft</option>
   <option value="2">Object Soft</option>
   <option value="3">Excepption Soft</option>
    </select>
        &nbsp;&nbsp;or Enter Code&nbsp;&nbsp;
        <input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" />
        <br />
        Address<br />
        <input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" />
        <br />
       <input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/>
        <br />
        <label id="Msg">Message here</label>
    </div>
</div>

Faites-moi savoir où je me suis trompé:/

javascriptjqueryasp.nethtmltabindex
12
Owais Qureshi

J'ai trouvé quelques problèmes mineurs de jQuery. Fixé ici: JSFiddle .

Cette ligne:

$('*').attr('tabindex', tabindex).focus();

peut être écrit comme ceci:

$('[tabindex=' + tabindex + ']').focus();

et ça:

$('#Msg').text($(this).id + " tabindex: " + tabindex 
           + " next element: " + $('*').attr('tabindex').id);

n'appelle pas l'attribut id de la manière jQuery (vous utilisez la syntaxe JavaScript, mais le résultat de $ (this) est un objet jQuery. Donc ... $(this).id devient $(this).attr('id'). 

Le formulaire a toujours un problème de soumission, pour lequel je n’ai pas trop creusé, mais il change de focus et remplit maintenant l’élément '#Msg'.

13
vansimke

Voici mon code de travail complet pour focusNextElement sur keydown [Entrée] sans _ ​​jQuery avec Exemple JSFiddle créé sur la base du stackoverflow réponses:

  1. Comment empêcher ENTER d'appuyer sur une touche pour soumettre un formulaire Web?
  2. Focus Next Element In Tab Index
<script type="text/javascript">

    function focusNextElement() {
      var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
      if (document.activeElement && document.activeElement.form) {
        var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
          function(element) {
            return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
          });
        var index = focussable.indexOf(document.activeElement);
        focussable[index + 1].focus();
      }
    }

    window.addEventListener('keydown', function(e) {
      if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName === 'INPUT' && e.target.type !== 'textarea') {
          e.preventDefault();
          focusNextElement();
          return false;
        }
      }
    }, true);

</script>
6
eapo

Je ne voulais pas faire de nouveau post et faire du SPAM avec la solution que je trouvais utile.

Informations collectées à partir d'autres sources ( Code Brian Glaz Nice-one) et version multi-navigateurs de Focus Next Element In Tab-index à l'aide de la touche Entrée.

Onglets sont pas l'un après l'autre, mais peuvent également contenir un espace entre (1,2,9,11,30, etc.)

var tabindex = 1; //start tabindex || 150 is last tabindex
    $(document).keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') { //onEnter
            tabindex++;
            //while element exist or it's readonly and tabindex not reached max do
            while(($("[TabIndex='"+tabindex+"']").length == 0 || $("[TabIndex='"+tabindex+"']:not([readonly])").length == 0) && tabindex != 150 ){
                tabindex++;
            }
            if(tabindex == 150){ tabindex = 1 } //reseting tabindex if finished
            $("[TabIndex='"+tabindex+"']").focus()
            return false;
        }
    });

    $("input").click(function() { //if changing field manualy with click - reset tabindex 
        var input = $(this);
        tabindex = input.attr("tabindex");
    })

J'espère que quelqu'un le trouvera utile . N'hésitez pas à le modifier/commenter.

4
karlisup
var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();
2
Ana El Bembo

Cherchant une solution à ce problème, j’ai généré une petite fonction jquery pour trouver le prochain tabindex valide; Supposons qu'il soit un peu plus facile à entretenir et peut-être un peu plus rapide qu'une boucle while:

function getNextTabindex(currentTabIndex) {
  return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}

J'espère que cela sera utile à quiconque en aura besoin; c'est testé et fonctionne.

En bref, expliquez ceci: recherchez l'élément du tabindex actuel, trouvez cet élément dans la liste de tous les éléments de tabindex, obtenez-en l'index et augmentez-le.

Ensuite, en utilisant cette fonction, vous pouvez sélectionner le prochain élément tabindex de cette façon:

$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();

Je n'ai pas testé l'appel mais suppose que cela fonctionne.

1
Jörg Henke
var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();

échantillon pour cellules modifiables dans le tableau

    $(document).on('dblclick', 'td', function () {
        console.log('clicked');
        this.contentEditable = 'true';
    });
 $(document).on('keydown', 'td', function (event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            this.contentEditable = 'false';
            //  $(this).next().focus().dblclick().focus();
            var tabindex = $(this).attr('tabindex');
            tabindex++;
            var next = $('[tabindex=' + tabindex + ']').focus().dblclick();
            if (next.is('td') == false)
                return true;
            var sel, range;
            if (window.getSelection && document.createRange) {
                range = document.createRange();
                range.selectNodeContents(next[0]);
                range.collapse(true);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(next[0]);
                range.collapse(true);
                range.select();
            }

            return false;
        }
    });

Cellules modifiables dans un tableau dynamique

0
Hossein Hajizadeh