Przechwytywanie klawisza TAB w polu tekstowym [zamknięte]

100

Chciałbym móc użyć Tabklawisza w polu tekstowym do tabulacji czterech spacji. Tak jak teraz, klawisz Tab przeskakuje mój kursor do następnego wejścia.

Czy istnieje JavaScript, który przechwyci klawisz Tab w polu tekstowym, zanim pojawi się w interfejsie użytkownika?

Rozumiem, że niektóre przeglądarki (np. FireFox) mogą na to nie pozwalać. A może niestandardowa kombinacja Shiftklawiszy Tab, taka jak + lub Ctrl+ Q?

javascript user-interface

— Seibar
źródło

Nie zapomnij sprawdzić aktywnego okna i pozwól mu normalnie się rozwinąć, jeśli nie jesteś w obszarze tekstowym edytora.

— FlySwat,

Ten post został oflagowany przez moderatora jako „należy do meta.stackoverflow.com”, ale ma ponad dwa lata, więc nie przenoszę go.

— Robert Harvey,

108

Nawet jeśli przechwycisz keydown/ keyupevent, są to jedyne zdarzenia uruchamiane przez klawisz tabulatora, nadal potrzebujesz sposobu, aby zapobiec wystąpieniu domyślnej akcji, przechodzenia do następnego elementu w kolejności tabulacji.

W przeglądarce Firefox możesz wywołać preventDefault()metodę na obiekcie zdarzenia przekazanym do modułu obsługi zdarzenia. W IE musisz zwrócić false z uchwytu zdarzenia. Biblioteka JQuery udostępnia preventDefaultmetodę na swoim obiekcie zdarzenia, 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>

— ScottKoon
źródło

1

Właśnie poprawiłem wiersz 4, z „if (el.attachEvent)” na „if (myInput.attachEvent)”

— Fenton

Zwróć uwagę, że ten kod dodaje TAB tylko na końcu. W większości przypadków jest to niewygodne.

— Alexander Palamarchuk,

@SteveFenton Czy istnieje prosty sposób na ponowne usunięcie spacji za pomocą keycode 8?

— yckart

18

Wolałbym, aby wcięcie tabulatora nie działało, niż przerywanie tabulacji między elementami formularza.

Jeśli chcesz wprowadzić wcięcie w celu umieszczenia kodu w polu Markdown, użyj Ctrl+ K(lub ⌘K na Macu).

Jeśli chodzi o faktyczne zatrzymywanie akcji, jQuery (którego używa Stack Overflow) zatrzyma bulgotanie zdarzenia, gdy zwrócisz false z wywołania zwrotnego zdarzenia. Ułatwia to pracę z wieloma przeglądarkami.

— Lauren
źródło

13

Poprzednia odpowiedź jest w porządku, ale jestem jednym z tych facetów, którzy zdecydowanie sprzeciwiają się mieszaniu zachowania z prezentacją (umieszczanie JavaScript w moim HTML), więc wolę umieścić logikę obsługi zdarzeń w moich plikach JavaScript. Ponadto nie wszystkie przeglądarki implementują zdarzenie (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
  }
}

— Tomek
źródło

6

Odradzałbym zmianę domyślnego zachowania klucza. Robię jak najwięcej bez dotykania myszy, więc jeśli mój klawisz tabulacji nie przejdzie do następnego pola formularza, będę bardzo zdenerwowany.

Klawisz skrótu może być jednak przydatny, zwłaszcza w przypadku dużych bloków kodu i zagnieżdżania. Shift-TAB to zła opcja, ponieważ normalnie przenosi mnie do poprzedniego pola w formularzu. Może byłby możliwy nowy przycisk w edytorze WMD do wstawiania TAB-a kodu z klawiszem skrótu?

— Wally Lawless
źródło

1

Pytanie jest całkowicie zależne od aplikacji. Pracuję nad formantem edytora kodu. Nie podałem klawisza tabulatora, a wszyscy moi uczniowie narzekali. Nie zrobiłem tego, ponieważ nie chciałem łamać dostępności dla mojego niewidomego ucznia. Dodałem teraz obsługę kart, ale podałem również opcję preferencji użytkownika, aby ją wyłączyć.

— Charles

@Charles bardzo dobra uwaga na temat wpływu na dostępność.

— Wally Lawless

4

jest problem w najlepszej odpowiedzi udzielonej przez ScottKoon

tutaj jest to

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

Powinien być

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

Z tego powodu nie działa w IE. Mając nadzieję, że ScottKoon zaktualizuje kod

— chintan123
źródło

3

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

Tu jest jeden: . Maleńki!

— Paul D. Waite
źródło