Wie überspringe ich ein Formularelement aus der TAB-Navigation?

Lesezeit: 3 Minuten

Benutzer-Avatar
Marke Milpi

Wenn ich benutze TAB auf der Tastatur bewegt sich der Cursor von 1 bis 4 (1 → 2 → 3 → 4)

Wie kann ich Nummer 3 überspringen? Ich möchte 1 → 2 → 4 gehen.

<table>
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr>
    <tr><td> <input type="text" value="3"></td><td><input type="text" value="4"></td></tr>
</table>

LIVE: http://jsfiddle.net/49Vca/

  • Möchten Sie, dass es (3) per Maus ausgewählt werden kann, aber nicht per Tab-Taste? Was ist mit Pfeilen oder direktem Zugriff (Wert auf der Tastatur drücken)?

    – Pierre Lacave

    30. August 2011 um 9:23 Uhr


Benutzer-Avatar
Justin

Wenn Sie den tabindex = “-1” auf die Eingabe selbst von #3 setzen, können Sie nicht zu #3 navigieren

Schau mal rein tabIndex Eigentum

Geben Sie die Element-ID an und schreiben Sie ein Skript in diese Zeilen …

function changeTabIndex()
  {
  document.getElementById('1').tabIndex="1"
  document.getElementById('2').tabIndex="2"
  document.getElementById('3').tabIndex="-1"
  document.getElementById('4').tabIndex="3"
  }
</script>

  • Warum per Skript einstellen? Macht keinen Sinn.

    – Tomalak

    30. August 2011 um 9:31 Uhr

  • Der Op hatte es mit Javascript und jQuery getaggt, also nahm ich an, dass er dasselbe mit js tun musste … mein Fehler

    – Jay

    30. August 2011 um 9:35 Uhr

  • Hm … das OP hat es mit jedem erdenklichen Tag versehen. 🙂 Aber ja, aus dieser Perspektive ist die Antwort gültig. +1

    – Tomalak

    30. August 2011 um 9:43 Uhr

  • Die Antwort ist gültig, außer in der Tatsache, dass Sie “legal” keine ID haben sollten, die mit einer Zahl beginnt Alle Browser gehen davon aus, dass tabIndex 0 ist, wodurch der Tab-Index die Reihenfolge annimmt, in der sie im DOM erscheinen.

    – Justin

    30. August 2011 um 10:06 Uhr

Benutzer-Avatar
Joel Purra

Wenn die Verwendung von jquery in Ordnung ist, können Sie es versuchen SkipOnTab.

SkipOnTab: Ein jQuery-Plugin, um ausgewählte Formularfelder von der Vorwärts-Tab-Reihenfolge auszunehmen.

Einfach hinzufügen data-skip-on-tab="true" zu den Elementen (oder Containern), die Sie überspringen möchten. Sie können immer noch klicken, um sie zu fokussieren, oder mit zurückgehen WechselTab.

In Ihrem Fall:

<table>
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr>
    <tr><td> <input type="text" value="3" data-skip-on-tab="true"></td><td><input type="text" value="4"></td></tr>
</table>

Sehen die einfache Demo und die Business-Case-Demo. Du kannst auch Probieren Sie das gegabelte jsfiddle mit SkipOnTab aus.

Angenommen, es gibt einen Grund, warum 3 tabierbar bleiben muss (z. B. eine MVC-Ansicht, in der das Element ein Eingabesteuerelement ist und Teil der Tab-Reihenfolge bleiben muss, oder es sonst keine Daten an den Controller zurücksendet), haben Sie wahrscheinlich gewonnen Sie können es nicht in beide Richtungen überspringen, und wenn Sie einen Weg finden, hängt es von einem Fehler ab, der ohne Vorwarnung gepatcht wird, um den Browser wieder in Übereinstimmung mit den W3-Spezifikationen bezüglich der Tab-Reihenfolge zu bringen.

Um entweder vorwärts oder rückwärts zu springen (aber nicht beides!), fügen Sie Element 3 einen onfocusin()-Event-Handler hinzu, der focus() für das unmittelbar darauf folgende oder vorausgehende Element aufruft. Wenn onfocus-Ereignisse weiterhin das zuvor fokussierte Steuerelement im Ereignisparameter (als event.relatedTarget) passieren dürften, könnten Sie erkennen, was das zuvor fokussierte Element war, und die Steuerung auf das vorherige Element übertragen, wenn der Fokus vom nächsten Element kam. Die W3-Spezifikation macht jedoch deutlich, dass dies kein konformes Verhalten ist, und HTML5-konforme Browser müssen null für event.relatedTarget übergeben und alles andere in ihrer Macht Stehende tun, um zu verhindern, dass ein focus()-Ereignishandler Zugriff auf hat Identität des zuvor fokussierten Steuerelements, insbesondere durch Nullen eines solchen Felds, bevor entweder ein Focus()- oder ein Blur()-Ereignishandler im clientseitigen Code aufgerufen wird.

1123380cookie-checkWie überspringe ich ein Formularelement aus der TAB-Navigation?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy