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

голоса
78

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

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

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

Задан 06/08/2008 в 14:27
источник пользователем
На других языках...                            


6 ответов

голоса
86

Даже если вы захватить событие KeyDown / KeyUp, только эти события, вкладка ключевые пожары, вы должны каким-то образом, чтобы предотвратить действие по умолчанию, переход к следующему пункту в закладке порядка, возникновения.

В Firefox вы можете вызвать preventDefault()метод объекта события , переданного в обработчик события. В IE, вы должны вернуть ложь от ручки события. Библиотека 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>
Ответил 16/08/2008 в 14:55
источник пользователем

голоса
17

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

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

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

Ответил 06/08/2008 в 14:36
источник пользователем

голоса
10

Предыдущий ответ хорошо, но я один из тех парней, которые твердо против смешения поведения с представлением (положить 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
  }
}
Ответил 06/08/2008 в 14:35
источник пользователем

голоса
4

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

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

Ответил 06/08/2008 в 14:36
источник пользователем

голоса
3

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

Ответил 09/09/2010 в 07:14
источник пользователем

голоса
1

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

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

Ответил 17/02/2010 в 11:55
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more