Захват ключа TAB в текстовом поле

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

Есть ли какой-нибудь JavaScript, который будет захватывать клавишу Tab в текстовом поле, прежде чем она всплывет в пользовательский интерфейс?

Я понимаю, что некоторые браузеры (например, FireFox) могут не допустить этого. Как насчет пользовательской комбинации клавиш, например Shift + Tab или Ctrl + Q?

Ответы

Ответ 1

Даже если вы keyup событие 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>

Ответ 2

Я бы предпочел, чтобы вкладка не работала, чем разбивка табуляции между элементами формы.

Если вы хотите сделать отступ для ввода кода в поле Markdown, используйте Ctrl + K (или ⌘K на Mac).

В терминах фактического прекращения действия jQuery (который использует переполнение стека) остановит событие от барботажа при возврате false из обратного вызова события. Это облегчает работу с несколькими браузерами.

Ответ 3

Предыдущий ответ прекрасен, но я один из тех ребят, которые твердо против смешивания поведения с презентацией (помещая 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
  }
}

Ответ 4

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

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

Ответ 5

есть проблема в лучшем ответе, данном 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 обновит код

Ответ 6

В Chrome на Mac Alt-Tab вставляет символ табуляции в поле <textarea>.

Вот один:. Ви!