javascriptjavascriptuser-interface

Захват клавиши TAB в текстовом поле

просмотры: 170.4K

Я хотел бы иметь возможность использовать 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>
Источник

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

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

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

Источник

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

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

Источник

Предыдущий ответ хорош, но я один из тех парней, которые категорически против смешивания поведения с презентацией (размещение JavaScript в моем HTML), поэтому я предпочитаю помещать свою логику обработки событий в мои файлы JavaScript. Кроме того, не все браузеры реализуют событие (или е) одинаково. Вы можете выполнить проверку перед запуском какой-либо логики:

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}
Источник

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

Вот один:. Wee!

Источник

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

Источник