Я хотел бы иметь возможность использовать Tabключ в текстовом поле для табуляции через четыре пробела. Как сейчас, клавиша Tab перемещает мой курсор к следующему входу.
Есть ли какой-нибудь JavaScript, который захватит клавишу Tab в текстовом поле, прежде чем он появится в пользовательском интерфейсе?
Я понимаю, что некоторые браузеры (например, FireFox) могут этого не допускать. Как насчет пользовательского сочетания клавиш, например Shift+ Tabили Ctrl+ Q?
Ответы:
Даже если вы захватываете событие 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>keycode 8?
Я бы предпочел, чтобы отступы табуляции не работали, чем нарушали табуляцию между элементами формы.
Если вы хотите сделать отступ для вставки кода в поле Markdown, используйте Ctrl+ K(или ⌘K на Mac).
Что касается фактической остановки действия, jQuery (который использует Stack Overflow) остановит всплытие события, когда вы вернете false из обратного вызова события. Это упрощает работу с несколькими браузерами.
Предыдущий ответ хорош, но я один из тех парней, которые категорически против смешивания поведения с презентацией (размещения 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
}
}Я бы посоветовал не менять поведение клавиши по умолчанию. Я делаю как можно больше, не касаясь мыши, поэтому, если вы сделаете так, чтобы моя клавиша табуляции не переходила к следующему полю в форме, я буду очень раздражен.
Однако сочетание клавиш может быть полезно, особенно с большими блоками кода и вложенностью. Shift-TAB - плохой вариант, потому что обычно это приводит меня к предыдущему полю формы. Может быть, новая кнопка в редакторе WMD для вставки кода-TAB с помощью сочетания клавиш станет возможной?
в лучшем ответе Скотта Куна есть проблема
вот
} 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 обновит код
В Chrome на Mac alt-tab вставляет символ табуляции в <textarea>поле.
Вот один:. Ви!