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