Захват клавиши TAB в текстовом поле
Я хотел бы иметь возможность использовать клавишу Tab в текстовом поле для перехода через четыре пробела. Как и сейчас, клавиша Tab перемещает мой курсор к следующему вводу.
Есть ли какой-нибудь JavaScript, который будет захватывать клавишу Tab в текстовом поле, прежде чем она появится в пользовательском интерфейсе?
Я понимаю, что некоторые браузеры (например, FireFox) могут не допускать этого. Как насчет специальной комбинации клавиш, такой как Shift+Tab или Ctrl+Q?
Не забудьте проверить сфокусированное окно и позволить ему нормально всплывать, если вы не находитесь в текстовой области редактора.
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>Я только что исправил строку 4 с «if (el.attachEvent)» на «if (myInput.attachEvent)».
Обратите внимание, что этот код добавляет TAB только в конце. Это неудобно в большинстве случаев.
Есть ли простой способ снова удалить пробелы с помощью кода 8?
только keydown ловит вкладки, keyup делает, но после табуляции на неопределенный элемент
Я бы предпочел, чтобы отступы табуляции не работали, чем разрывали табуляцию между элементами формы.
Если вы хотите сделать отступ для ввода кода в поле Markdown, используйте Ctrl+K (или ⌘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 с клавишей быстрого доступа?
Вопрос полностью зависит от приложения. Я работаю над элементом управления редактором кода. Я не предоставил клавишу табуляции, и все мои ученики жаловались. Я этого не сделал, потому что не хотел нарушать доступность для моего единственного слепого ученика. Теперь я добавил поддержку вкладок, но также предоставил возможность отключить ее в настройках пользователя.
очень хороший момент о последствиях доступности.
Не могли бы вы рассказать больше о том, как добавление поддержки клавиши табуляции может нарушить доступность для слепых пользователей? Это потому, что некоторые слепые пользователи полагаются на вкладку для переключения фокуса, как описано в этом ответе?
В Chrome на Mac сочетание клавиш Alt-Tab вставляет символ табуляции в поле <textarea>.
Вот один: . Ви!
в лучшем ответе, данном 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 обновит код
Как установить цвет фона элемента HTML, используя свойства css в JS
Как установить цвет фона HTML-элемента с помощью css в JavaScript? 17 ответов Как правило, свойства CSS преобразуются в JavaScript путем приведения их к верблюжьему регистру без дефисов. Так background-color становится backgroundColor . function setColor(element, color) { element.style.backgroundColor = color; } // where el is the concerned element var el = document.getElementById('elementId'); setColor(el, 'green'); Я хотел бы добавить, что цвет, очевидно, должен быть в кавычках element.style.backgroundColor = "color"; например - element.style.backgroundColor = "оранжевый"; отличный ответ В тестах Selenium: ((IJavaScriptExecutor)WebDriver).ExecuteScript("arguments[0].style.background = 'yellow';", webElement); @ Catto В этом случае цвет является аргументом функции, поэтому его не следует заключать в кавычки. Однако вы правы в том, что…
Как я могу заставить браузер видеть изменения CSS и Javascript?
Файлы CSS и Javascript меняются не очень часто, поэтому я хочу, чтобы веб-браузер кэшировал их. Но я также хочу, чтобы веб-браузер видел изменения, внесенные в эти файлы, не требуя от пользователя очистки кеша браузера. Также нужно решение, которое хорошо работает с системой контроля версий, такой как Subversion. Некоторые решения, которые я видел, включают добавление номера версии в конец файла в виде строки запроса. Можно использовать номер версии SVN, чтобы автоматизировать это для вас: ASP . NET Показать номер версии SVN. Можете ли вы указать, как вы включаете переменную Revision другого файла? То есть в файле HTML я могу…
Как я могу определить, блокирует ли браузер всплывающее окно? - JS
Как я могу определить, блокирует ли браузер всплывающее окно? Время от времени я сталкивался с веб-страницей, которая пытается открыть новое окно (для ввода данных пользователем или чего-то важного), но блокировщик всплывающих окон предотвращает это. Какие методы может использовать вызывающее окно, чтобы убедиться, что новое окно запускается правильно? 9 ответов Если вы используете JavaScript для открытия всплывающего окна, вы можете использовать что-то вроде этого: var…