Захват клавиши TAB в текстовом поле [закрыто]

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

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

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

6 81
javascript user-interface

6 ответов:

даже если вы захватите keydown/keyup событие, это единственные события, которые срабатывает клавиша tab, вам все еще нужно каким-то образом предотвратить действие по умолчанию, переход к следующему элементу в порядке табуляции.

в 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>
91

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

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

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

17

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

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

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

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

3

в Chrome на Mac alt-tab вставляет символ вкладки в

2