Przechwytywanie klawisza TAB w polu tekstowym [zamknięte]

Chciałbym móc używać klawisza Tab w polu tekstowym a do zakładki ponad czterema spacjami. Tak jak teraz, klawisz Tab przeskakuje mój kursor do następnego wejścia.

Czy Jest jakiś JavaScript, który przechwyci klawisz Tab w polu tekstowym, zanim przejdzie do interfejsu użytkownika?

Rozumiem, że niektóre przeglądarki (np. FireFox) mogą na to nie pozwolić. Co powiesz na niestandardowe kombinacje klawiszy, takie jak Shift+Tab lub Ctrl+Q ?

Author: David Waters, 2008-08-06
Source

6 answers

Nawet jeśli uchwycisz keydown/keyup event, są to jedyne zdarzenia wywołane przez klawisz tab, nadal potrzebujesz sposobu, aby zapobiec wystąpieniu domyślnej akcji, przechodzącej do następnego elementu w kolejności kart.

W Firefoksie można wywołać metodę preventDefault() na obiekcie event przekazanym do obsługi zdarzenia. W IE musisz zwrócić false z uchwytu zdarzenia. Biblioteka JQuery dostarcza metodę preventDefault na swoim obiekcie event, która działa w IE i FF.

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>
 91
Author: ScottKoon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-11 04:17:08

Wolałbym, aby wcięcia tabulatorów nie działały, niż łamanie tabulatorów między elementami formularza.

Jeśli chcesz wciąć kod w polu Markdown, użyj Ctrl+K (lub ⌘K na Macu).

Jeśli chodzi o rzeczywiste zatrzymanie akcji, jQuery (którego używa przepełnienie stosu) zatrzyma Zdarzenie przed bulgotaniem, gdy zwrócisz false z wywołania zwrotnego zdarzenia. Ułatwia to pracę z wieloma przeglądarkami.

 17
Author: Lauren,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-06 06:02:44

Poprzednia odpowiedź jest w porządku, ale jestem jednym z tych facetów, którzy stanowczo przeciwko mieszaniu zachowań z prezentacją (umieszczenie JavaScript w moim HTML), więc wolę umieścić moją logikę obsługi zdarzeń w moich plikach JavaScript. Dodatkowo nie wszystkie przeglądarki implementują event (lub e) w ten sam sposób. Możesz chcieć sprawdzić przed uruchomieniem dowolnej logiki: 

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}
 10
Author: Tom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-29 05:47:51

Odradzam zmianę domyślnego zachowania klucza. Robię jak najwięcej bez dotykania myszy, więc jeśli mój klawisz tab nie przeniesie się do następnego pola na formularzu będę bardzo zdenerwowany.

Klawisz skrótu może być jednak przydatny, szczególnie w przypadku dużych bloków kodu i zagnieżdżania. Shift-TAB jest złą opcją, ponieważ zwykle przenosi mnie do poprzedniego pola w formularzu. Może Nowy przycisk w edytorze WMD do wstawienia karty kodu, z klawiszem skrótu, byłby możliwe?

 5
Author: Wally Lawless,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-06 13:36:33

Jest problem w najlepszej odpowiedzi udzielonej przez ScottKoon

Here is it 

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Powinno być 

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Z tego powodu nie działało w IE. Mam nadzieję, że ScottKoon zaktualizuje kod

 3
Author: chintan123,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-15 00:14:39

W Chrome na Macu alt-tab wstawia znak tabulacji do pola <textarea>.

Oto jeden: . Wee!

 2
Author: Paul D. Waite,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-17 10:55:00