Захват клавиши TAB в текстовом поле [закрыто]

Я хотел бы иметь возможность использовать Tabключ в текстовом поле для перехода на четыре пробела. Теперь, когда вы нажимаете клавишу Tab, мой курсор перемещается к следующему вводу.

Есть ли какой-нибудь JavaScript, который будет захватывать клавишу Tab в текстовом поле, прежде чем она всплывет в пользовательский интерфейс?

Я понимаю, что некоторые браузеры (например, FireFox) могут не допустить этого. Как насчет пользовательского сочетания клавиш, такого как Shift+ Tabили Ctrl+ Q?

6.08.2008 13:27:05
Не забудьте проверить сфокусированное окно, и пусть оно всплывает нормально, если вы не находитесь в текстовом редакторе.
FlySwat 24.08.2008 14:57:44
Это сообщение было помечено модератором как «принадлежит meta.stackoverflow.com», но прошло более двух лет, поэтому я не переношу его.
Robert Harvey 10.02.2011 20:29:24
6 ОТВЕТОВ
РЕШЕНИЕ

Даже если вы фиксируете событие keydown/ keyup, это единственные события, которые запускает клавиша табуляции, вам все равно нужен какой-то способ предотвратить действие по умолчанию, переход к следующему элементу в порядке табуляции.

В Firefox вы можете вызывать preventDefault()метод объекта события, передаваемого вашему обработчику событий. В IE вы должны вернуть false из дескриптора события. Библиотека JQuery предоставляет preventDefaultметод для своего объекта события, который работает в IE и 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>
107
11.07.2018 04:17:08
Я только что исправил строку 4, от "if (el.attachEvent)" до "if (myInput.attachEvent)"
Fenton 10.09.2010 07:42:56
Обратите внимание, что этот код добавляет TAB только в конце. Это неудобно в большинстве случаев.
Alexander Palamarchuk 14.07.2012 13:26:05
@SteveFenton Есть ли простой способ удалить пробелы снова keycode 8?
yckart 2.12.2012 12:34:55

Предыдущий ответ неплох, но я один из тех парней, которые категорически против смешивания поведения с презентацией (помещая JavaScript в мой HTML), поэтому я предпочитаю размещать логику обработки событий в моих файлах JavaScript. Кроме того, не все браузеры реализуют событие (или e) одинаково. Вы можете выполнить проверку перед запуском любой логики:

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}
12
29.07.2017 05:47:51

Я бы предпочел отступ с табуляцией не работать, чем ломать табуляцию между элементами формы.

Если вы хотите сделать отступ, чтобы ввести код в поле Markdown, используйте Ctrl+ K(или ⌘K на Mac).

С точки зрения фактической остановки действия, jQuery (который использует переполнение стека) остановит всплывающее событие, когда вы вернете false из обратного вызова события. Это облегчает работу с несколькими браузерами.

18
6.02.2013 06:02:44

Я бы посоветовал не изменять поведение ключа по умолчанию. Я делаю все возможное, не касаясь мыши, поэтому, если вы заставите мою клавишу табуляции не перейти к следующему полю в форме, я буду очень раздражен.

Тем не менее, сочетание клавиш может быть полезно, особенно с большими блоками кода и вложенностью. Shift-TAB - плохой вариант, потому что он обычно приводит меня к предыдущему полю в форме. Может быть, появится новая кнопка в редакторе WMD для вставки кода TAB с помощью клавиши быстрого доступа?

6
6.08.2008 13:36:33
Вопрос полностью зависит от приложения. Я работаю над контролем редактора кода. Я не предоставил клавишу табуляции, и все мои ученики жаловались. Я не сделал, потому что я не хотел нарушать доступность для моего единственного студента, который был слепым. Теперь я добавил поддержку вкладок, но также предоставил опцию пользовательских настроек, чтобы отключить ее.
Charles 4.10.2015 19:14:30
@ Чарльз очень хорошая точка зрения о последствиях доступности.
Wally Lawless 5.10.2015 13:14:31

В Chrome на Mac alt-tab вставляет символ табуляции в <textarea>поле.

Вот один из них: Ви!

3
17.02.2010 10:55:00

проблема в лучшем ответе от ScottKoon

вот

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

Должно быть

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

Из-за этого он не работал в IE. Надеемся, что ScottKoon обновит код

4
15.01.2013 00:14:39