Захоплення ключа TAB у текстовому полі [закрито]

100

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

Чи є якийсь JavaScript, який буде захоплювати клавішу Tab у текстовому полі, перш ніж вона з'явиться до інтерфейсу користувача?

Я розумію, що деякі браузери (тобто FireFox) можуть не дозволити цього. Як щодо користувацького клавішного комбо, як Shift+ Tab, або Ctrl+ Q?

javascript  user-interface 
— Сейбар
джерело
Не забудьте перевірити наявність зосередженого вікна, і нехай воно нормально пухирить, якщо ви не знаходитесь у текстовій області редактора.
— FlySwat
Ця публікація позначена модератором як "належить на meta.stackoverflow.com", але їй вже більше двох років, тому я не мігрую її.
— Роберт Харві

Відповіді:

108

Навіть якщо ви зафіксували keydown/ keyupподія, це єдині події, які спрацьовує клавіша вкладки, вам все одно потрібен спосіб запобігти появі дії за замовчуванням, переходячи до наступного елемента в порядку вкладки.

У Firefox ви можете викликати preventDefault()метод на об’єкт події, переданий вашому обробнику подій. В IE ви повинні повернути помилку з ручки події. Бібліотека 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>
— ScottKoon
джерело
1
Я щойно виправив рядок 4, від "якщо (el.attachEvent)" до "якщо (myInput.attachEvent)"
— Fenton,
Зауважте, що цей код додає TAB лише наприкінці. У більшості випадків це незручно.
— Олександр Паламарчук
@SteveFenton Чи є простий спосіб знову видалити пробіли keycode 8?
— yckart
18

Я вважаю за краще, щоб відступ вкладки не працював, ніж розбивати вкладки між елементами форми.

Якщо ви хочете вступити відступ до коду у полі Markdown, використовуйте Ctrl+ K(або ⌘K на Mac).

Що стосується фактичної зупинки дії, jQuery (яку використовує переповнення стека) зупинить подію з бульбашкою, коли ви повернете помилку з зворотного виклику події. Це полегшує життя для роботи з кількома браузерами.

— Лорен
джерело
13

Попередня відповідь чудова, але я один з тих хлопців, який твердо проти змішування поведінки з презентацією (введення 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
  }
}
— Том
джерело
6

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

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

— Уоллі Лоулесс
джерело
1
Питання повністю залежить від програми. Я працюю над контролем редактора коду. Я не вказав клавішу вкладки, і мої учні всі скаржилися. Я цього не зробив, бо не хотів порушувати доступність для свого студента, який був сліпим. Зараз я додав підтримку на вкладках, але також надав варіант переваги користувача, щоб її вимкнути.
— Чарльз
@Charles дуже хороший пункт про наслідки доступності.
— Wally Lawless
4

є проблема найкращої відповіді, яку дав СкотКун

ось воно

} 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 оновить код

— chintan123
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.