AngularJs: Tastatur Navigation mit TAB-Taste in verschiedenen Gruppen/Formulare/Divs

Ich habe zwei Gruppen und ich möchte die Navigation für sie und auf letzten Tab-Steuerelement der Gruppe trennen, wenn Tabulatortaste gedrückt wird, sollte der Iterationszyklus neu gestartet werden und der Fokus sollte sich auf das Anfangselement der Gruppe bewegen (was der 0 Index wäre)AngularJs: Tastatur Navigation mit TAB-Taste in verschiedenen Gruppen/Formulare/Divs

In dem unten angegebenen Beispiel habe ich zwei Gruppen hinzugefügt und in der Gruppe habe ich einige Textfelder hinzugefügt und nicht serielle Reihenfolge zugewiesen.

Probleme

Wenn der Fokus durch Drücken der Tabulatortaste wird über die Gruppen bewegen
Am letzten Index der Zyklus nicht, stattdessen wird neu gestartet sein Gehen in der Adressleiste

Hinweis : Ich mache eine angularjs App und das ist nur ein Dummy, um eine klare Sicht auf mein Problem

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 
    <div role="group" tabindex="-1"> 
 
     <h1>Group 1</h1> 
 
     <br> 
 
     <input type="text" tabindex="1" /> 
 
     <br> 
 
     <input type="text" tabindex="6" /> 
 
     <br> 
 
     <input type="text" tabindex="4" /> 
 
     <br> 
 
     <input type="text" tabindex="2" /> 
 
     <br> 
 
     <input type="text" tabindex="5" /> 
 
     <br> 
 
     <input type="text" tabindex="2" /> 
 
     <br> 
 
     <button tabindex="7">Submit</button> 
 
    </div> 
 
    <hr> 
 

 
    <div> 
 
     <div role="group" tabindex="-1"> 
 
      <h1>Group 2</h1> 
 
      <br> 
 
      <input type="text" tabindex="1" /> 
 
      <br> 
 
      <input type="text" tabindex="6" /> 
 
      <br> 
 
      <input type="text" tabindex="4" /> 
 
      <br> 
 
      <input type="text" tabindex="2" /> 
 
      <br> 
 
      <input type="text" tabindex="5" /> 
 
      <br> 
 
      <input type="text" tabindex="2" /> 
 
      <br> 
 
      <button tabindex="7">Submit</button> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-05-04 Vikas Bansal

für die Lösung führt mich Vielen Dank @Kiran Nawaleand @ Gökhan Kurt.

Ich habe eine generische Direktive erstellt, die für jede eckige App wiederverwendbar ist.

Abhängigkeiten

JQuery
AngularJS

In Richtlinie I Kommentare hinzugefügt haben, die Sie durch die Art und Weise führen wird die Richtlinie arbeitet.

Wie zu verwenden?

hinzufügen die folgenden Attribute gegeben und die Richtlinie in Ihrem Element

tab-man tab-index="0" tab-group="g1" 

tab-man : the directive 
tab-index : it is the index of the element in the group 
tab-group : name of the group

Hinweis:

Es sollte immer ein 0 Index in jeder Gruppe sein sonst wird der Zyklus nicht neu starten .
Wenn irgendein Index wie 0,1,2,4... übersprungen (3 wird übersprungen) dann nach 2 den Fokus auf 0

<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
 
    <script> 
 
    var app = angular.module('myapp', []); /// angular app 
 

 

 
    app.directive('tabMan', function() { ///directive 
 
     return { 
 
     restrict: 'A', /// accessible only by attribute 
 
     scope: {}, /// scope is not needed 
 

 
     link: function(scope, element, attrs) { ///link function to add key-down event on the target element 
 

 
      var gotoElement = function(grp, idx) { 
 
      /// get next element 
 
      var nextElement = $("input[tab-group='" + grp + "'][tab-index='" + idx + "']")[0]; 
 

 
      /// if there is not next element then go to the 0 index 
 
      if (nextElement == undefined) { 
 
       if (idx != 0) { /// if the index is 0 then do not do any thing 
 
       gotoElement(grp, 0); /// restart the cycle 
 
       } 
 
      } else { 
 
       nextElement.focus(); /// succesfully give focus to the next 
 
      } 
 

 
      }; 
 

 
      var tabIndex = attrs.tabIndex; 
 
      var tabGroup = attrs.tabGroup; 
 

 
      $(element).keydown(function(event) { 
 

 
      if (event.keyCode == 9) { /// go inside if tab key is pressed 
 

 
       var tIdx = $(event.target).attr("tab-index"); /// get the current index of element 
 
       var nextTid = parseInt(tIdx.toString()) + 1; /// get the next index of element 
 
       nextTid = Number(nextTid); /// turn the index into number 
 

 
       var tGrp = $(event.target).attr("tab-group"); /// get the group of the element 
 

 
       gotoElement(tGrp, nextTid); /// go to the next element 
 

 
       /// the work of tab is done by the directive so remove the default and stop the bubbeling 
 
       event.stopPropagation() 
 
       event.preventDefault(); 
 
      } 
 

 
      }); 
 
     } 
 
     }; 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body ng-app="myapp"> 
 
    <div role="group" tabindex="-1"> 
 
    <h1>Group 1</h1> 
 
    <br> 
 
    <input type="text" tab-man tab-index="0" tab-group="g1" /> 
 
    <br> 
 
    <input type="text" tab-man tab-index="5" tab-group="g1" /> 
 
    <br> 
 
    <input type="text" tab-man tab-man tab-index="2" tab-group="g1" /> 
 
    <br> 
 
    <input type="text" tab-man tab-index="3" tab-group="g1" /> 
 
    <br> 
 
    <input type="text" tab-man tab-index="4" tab-group="g1" /> 
 
    <br> 
 
    <input type="text" tab-man tab-index="1" tab-group="g1" /> 
 
    <br> 
 
    <button>Submit</button> 
 
    </div> 
 
    <hr> 
 

 
    <div> 
 
    <div role="group" tabindex="-1"> 
 
     <h1>Group 2</h1> 
 
     <br> 
 
     <input type="text" tab-man tab-index="0" tab-group="g2" /> 
 
     <br> 
 
     <input type="text" tab-man tab-index="5" tab-group="g2" /> 
 
     <br> 
 
     <input type="text" tab-man tab-man tab-index="2" tab-group="g2" /> 
 
     <br> 
 
     <input type="text" tab-man tab-index="3" tab-group="g2" /> 
 
     <br> 
 
     <input type="text" tab-man tab-index="4" tab-group="g2" /> 
 
     <br> 
 
     <input type="text" tab-man tab-index="1" tab-group="g2" /> 
 
     <br> 
 
     <button>Submit</button> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2016-05-04 07:41:19

Ich habe oben Code versucht, neu zu starten, aber die cursor navigiere von oben nach unten, ich brauche die Cursor-Bewegung von links nach rechts und dann nach unten, wie kann ich es erreichen –

Sie können 'tab-index =" 2 "' –

Danke, Es funktioniert gut, um den Zyklus neu zu starten, aber mein Problem ist: https://stackoverflow.com/questions/44455082/tab-index-zum-move-left-to-right-then-down-, wie kann ich nach links navigieren -nach rechts und dann nach unten, wenn das Design mit Ihrer Anweisung in einem anderen div ist? –

Leider kann man ohne JavaScript, dass dies nicht tun.

Hier habe ich den JavaScript/jQuery-Code implementiert, um Tabbing zwischen zwei Gruppen zu behandeln.

Bitte beachten Sie auch, dass Sie für den Wechsel zur zweiten Gruppe entscheiden müssen, wann Sie zur zweiten Gruppe von Eingängen übergehen möchten.

HTML

<div id="group-1" role="group" tabindex="0"> 
    <h1>Group 1</h1> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="button" value="submit" tabindex="1" /> 
    <div id="focusguard-1" tabindex="1"></div> 
</div> 
<hr> 

<div> 
    <div id="group-2" role="group" tabindex="0"> 
    <h1>Group 2</h1> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="text" tabindex="1" /> 
    <br> 
    <input type="button" value="submit" tabindex="1" /> 
    <div id="focusguard-2" tabindex="1"></div> 
    </div> 
</div>

JavaScript/JQuery

$('#focusguard-1').on('focus', function() { 
    $('#group-1 input:first').focus(); 
}); 

$('#focusguard-2').on('focus', function() { 
    console.log("Focus in"); 
    $('#group-2 input:first').focus(); 
});

Quelle

2016-05-04 06:37:06

TABINDEX global in einem Fenster arbeitet. Sie können erreichen, was Sie mit Javascript wollen. Ihre Gruppen müssen eine Klasse "closedFocus" haben und Ihre Elemente sollten einen tabIndex haben. Sie können den Code ändern um den gewünschten Effekt zu erreichen:

$(".closedFocusGroup [tabindex]").on("keydown", function(e) { 
 
    if (e.which == 9) { 
 
    var parentGroup = this.closest(".closedFocusGroup"); 
 
    var allChildren = $(parentGroup).find("[tabindex]"); 
 
    allChildren.sort(function(a,b){ return a.tabIndex-b.tabIndex}); 
 
    var thisIndex = allChildren.index(this); 
 
    var nextIndex = (thisIndex + 1) % allChildren.length; 
 
    var nextItem = allChildren[nextIndex]; 
 
    if (nextItem) nextItem.focus(); 
 
    e.preventDefault(); 
 
    } 
 
});

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

 
<div role="group" class="closedFocusGroup" tabindex="-1"> 
 
    <h1>Group 1</h1> 
 
    <br> 
 
    <input type="text" tabindex="1" /> 
 
    <br> 
 
    <input type="text" tabindex="6" /> 
 
    <br> 
 
    <input type="text" tabindex="4" /> 
 
    <br> 
 
    <input type="text" tabindex="2" /> 
 
    <br> 
 
    <input type="text" tabindex="5" /> 
 
    <br> 
 
    <input type="text" tabindex="2" /> 
 
    <br> 
 
    <button tabindex="7">Submit</button> 
 
</div> 
 
<hr> 
 

 
<div> 
 
    <div role="group" class="closedFocusGroup" tabindex="-1"> 
 
    <h1>Group 2</h1> 
 
    <br> 
 
    <input type="text" tabindex="1" /> 
 
    <br> 
 
    <input type="text" tabindex="6" /> 
 
    <br> 
 
    <input type="text" tabindex="4" /> 
 
    <br> 
 
    <input type="text" tabindex="2" /> 
 
    <br> 
 
    <input type="text" tabindex="5" /> 
 
    <br> 
 
    <input type="text" tabindex="2" /> 
 
    <br> 
 
    <button tabindex="7">Submit</button> 
 
    </div> 
 
</div>

Quelle

2016-05-04 06:56:02

AngularJs: Tastatur Navigation mit TAB-Taste in verschiedenen Gruppen/Formulare/Divs

Antwort

Verwandte Themen