Как перейти на и затем «щелкнуть» div с помощью клавиатуры

Question

Как перейти на и затем «щелкнуть» div с помощью клавиатуры

0

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

Каждый флажок сделан из div, и я могу сделать это сфокусированным, добавив tabindex = "0", однако нажатие пробела или ввода не вызывает привязки кликов.

Есть ли способ легко подключить это?

<div class="checkbox" tabindex="0" 
     data-bind="'css': { 'checked': IsAdmin }, 'click': toggleIsAdmin">
    <div class="Icons_checkboxnotticked-png sprite" 
         data-bind="'css': { 'Icons_checkboxticked-png' : IsAdmin}"></div>
    <label>Is Admin?</label>
</div>

4imble 28 март 2014, в 18:09

Источник

1

добавить обработчик нажатия клавиш и затем нажать кнопку
CrazyDart 28 март 2014, в 16:15
0

хм, да, я сейчас смотрю на связывание событий. knockoutjs.com/documentation/event-binding.html
4imble 28 март 2014, в 16:18

Теги:

javascript

jquery

focus

knockout.js

1 ответ

Ещё вопросы

добавить обработчик нажатия клавиш и затем нажать кнопку
хм, да, я сейчас смотрю на связывание событий. knockoutjs.com/documentation/event-binding.html

4imble · Answer 1 · 2014-03-28T15-04-00.000Z

Хорошо, я сделал это так,

<div class="checkbox" tabindex="0" 
     data-bind="'css': { 'checked': IsAdmin }, 
                'click': toggleIsAdmin, 
                'event': {keypress: toggleIsAdmin}">
    <div class="Icons_checkboxnotticked-png sprite" 
         data-bind="'css': { 'Icons_checkboxticked-png' : IsAdmin}"></div>
    <label>Is Admin?</label>
</div>

var vm = function()
{
    ...

    var spaceKey = 32, enterKey = 13;

    var toggleIsAdmin = function (data, event)
    {
        if (!event.keyCode 
               || event.keyCode == spaceKey 
               || event.keyCode == enterKey)
        {
            this.IsAdmin(!this.IsAdmin());
        }
    };

    ...
}