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

Salut Les Amis,
Je suis en train de travailler sur une petite tâche qui est de permettre à l'utilisateur de tabindex l'élément html sur enter touche.

Comme im nouveau à jquery , j'ai écrit un code qui me semble que Cela va fonctionner ,mais il y a quelques problèmes.

Premiers résultats
Le coupable code ,il ne marche pas ,comme la sortie du Msg lablel est "Undefined"

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

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>

Laissez-moi savoir où je suis allé mal :/

source d'informationauteur Owais Qureshi

13

J'ai trouvé un couple de mineurs jQuery questions. Fixe ici: JSFiddle.

Cette ligne:
```
$('*').attr('tabindex', tabindex).focus();
```
peut être écrit comme ceci:
```
$('[tabindex=' + tabindex + ']').focus();
```
et ce:
```
$('#Msg').text($(this).id + " tabindex: " + tabindex 
           + " next element: " + $('*').attr('tabindex').id);
```
n'est pas l'appel de l'attribut id de l'jQuery façon (vous utilisez la syntaxe JavaScript, mais le résultat de $(ce) est un objet jQuery. Alors... $(this).id devient $(this).attr('id').

La forme a toujours une soumission problème, que je n'ai pas creuser trop loin, mais il change le focus et remplit le '#Message' élément de maintenant.

Voici mon code qui fonctionne à focusNextElement sur keydown [Enter] sans jQuery avec JSFiddle exemple créé sur la base suivante stackoverflow réponses:

<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>

Ne veux pas faire un nouveau post et de faire du SPAM avec la solution que j'ai trouvé utile.

A recueilli des renseignements auprès d'autres sources (Brian Glaz code nice-one) et fait de la croix-version du navigateur de Focus de l'Élément Suivant Dans l'Onglet index à l'aide de Entrer clé.

Onglet index sont pas l'un après l'autremais qui peut aussi 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 va trouver utile.
N'hésitez pas à modifier/commentaire.

var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();

1

À la recherche d'une solution pour ce problème, j'ai généré une petite fonction jquery pour trouver la prochaine valide tabindex; supposons que c'est un peu plus facile d'entretien et peut-être un peu plus rapide qu'une boucle while:
```
function getNextTabindex(currentTabIndex) {
  return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}
```
Espère que ce sera utile à quiconque en a besoin; c'est testé et fonctionne.

Avec des explications sur ce en bref: recherche de l'élément de l'actuel tabindex, trouver cet élément dans la liste de tous les tabindex éléments, l'index d'elle et de l'augmentation de l'index.

Puis, à l'aide de cette fonction, vous pouvez sélectionner la prochaine tabindex élément de cette façon:
```
$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();
```
Je n'ai pas tester l'appeler mais admettons que cela fonctionne.

var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();

échantillon de 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 la dynamique de la table

Vous devez vous connecter pour publier un commentaire.