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

StackOverflow https://stackoverflow.com/questions/3362

  •  08-06-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

Даже если вы захватите 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 на Mac).

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

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

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

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

есть проблема в лучшем ответе Скотта Куна

вот

} 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.Надеясь, что СкоттКун обновит код

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top