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

100

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

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

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

javascript user-interface Сейбар
источник
Не забудьте проверить сфокусированное окно, и пусть оно всплывает нормально, если вы не находитесь в текстовой области редактора.
FlySwat,
Этот пост был отмечен модератором как «принадлежит meta.stackoverflow.com», но ему больше двух лет, поэтому я не буду его переносить.
Роберт Харви

Ответы:

108

Даже если вы захватываете событие 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>
ScottKoon
источник
1
Я только что исправил строку 4, с «if (el.attachEvent)» на «if (myInput.attachEvent)»
Фентон
Обратите внимание, что этот код добавляет TAB только в конце. В большинстве случаев это неудобно.
Александр Паламарчук
@SteveFenton Есть ли простой способ снова удалить пробелы keycode 8?
yckart 02
18

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

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

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

Лорен
источник
13

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

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

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

Уолли Лоулесс
источник
1
Вопрос полностью зависит от приложения. Я работаю над редактором кода. Я не предоставил клавишу табуляции, и все мои ученики жаловались. Я не сделал этого, потому что не хотел нарушать доступность для моего единственного слепого ученика. Я добавил поддержку вкладок, но также предоставил возможность отключить ее в предпочтениях пользователя.
Чарльз
@Charles очень хорошо замечает последствия для доступности.
Уолли Лоулесс,
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 обновит код

чинтан123
источник
3

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

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

Пол Д. Уэйт
источник