Захват клавиши TAB в текстовом поле
Я хотел бы иметь возможность использовать клавишу Tab в текстовом поле для табуляции через четыре пробела. Как сейчас, клавиша Tab перемещает мой курсор к следующему входу.
Есть ли какой-нибудь JavaScript, который захватит клавишу Tab в текстовом поле, прежде чем он появится в пользовательском интерфейсе?
Я понимаю, что некоторые браузеры (например, FireFox) могут этого не допускать. Как насчет специальной комбинации клавиш, такой как Shift + Tab или Ctrl + Q?
Не забудьте проверить сфокусированное окно, и пусть оно всплывает нормально, если вы не находитесь в текстовой области редактора.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Предыдущий ответ хорош, но я один из тех парней, которые категорически против смешивания поведения с презентацией (размещение JavaScript в моем HTML), поэтому я предпочитаю помещать свою логику обработки событий в мои файлы JavaScript. Кроме того, не все браузеры реализуют событие (или е) одинаково. Вы можете выполнить проверку перед запуском какой-либо логики:
document.onkeydown = TabExample;
function TabExample(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var tabKey = 9;
if (evt.keyCode == tabKey) {
// do work
}
}
Я бы предпочел, чтобы отступы табуляции не работали, чем нарушали табуляцию между элементами формы.
Если вы хотите сделать отступ для вставки кода в поле Markdown, используйте Ctrl + K (или ⌘K на Mac).
Что касается фактической остановки действия, jQuery (который использует Stack Overflow) остановит всплытие события, когда вы вернете false из обратного вызова события. Это упрощает работу с несколькими браузерами.
Я бы посоветовал не менять поведение клавиши по умолчанию. Я делаю как можно больше, не касаясь мыши, поэтому, если вы сделаете так, чтобы моя клавиша табуляции не переходила в следующее поле в форме, я буду очень раздражен.
Однако сочетание клавиш может быть полезно, особенно с большими блоками кода и вложенностью. Shift-TAB - плохой вариант, потому что обычно это приводит меня к предыдущему полю формы. Может быть, можно было бы создать новую кнопку в редакторе WMD для вставки кода-TAB с помощью сочетания клавиш?
Вопрос полностью зависит от приложения. Я работаю над редактором кода. Я не предоставил клавишу табуляции, и все мои ученики жаловались. Я не сделал этого, потому что не хотел нарушать доступность для моего единственного слепого ученика. Теперь я добавил поддержку вкладок, но также предоставил возможность отключить ее в предпочтениях пользователя.
@Charles очень хорошо замечает последствия для доступности.
Даже если вы захватываете событие 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>
Я только что исправил строку 4 с «if (el.attachEvent)» на «if (myInput.attachEvent)»
Обратите внимание, что этот код добавляет TAB только в конце. В большинстве случаев это неудобно.
@SteveFenton Есть простой способ снова удалить пробелы с помощью keycode8?
В Chrome на Mac Alt-Tab вставляет символ табуляции в поле <textarea>.
Вот один:. Wee!
в лучшем ответе Скотта Куна есть проблема
вот
} 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 обновит код
Этот пост был помечен модератором как «принадлежит meta.stackoverflow.com», но ему больше двух лет, поэтому я не буду его переносить.