Как выделить всю страницу, а не поле ввода внутри? - PullRequest
Новая
       28

Как выделить всю страницу, а не поле ввода внутри?

1 голос
/ 05 декабря 2011 
<body>
  <div>Sample div</div>
  <input type='text'/>
</body>

$(document).delegate('body *:not(input)', 'keyup', function(e){
    if((e.keyCode || e.which) == 39){ //right arrow
        $('#next_image').click();
    }
    if((e.keyCode || e.which) == 37){ //left arrow
        $('#prev_image').click();
    }
}

Я использую библиотеку jQuery Cycle для настройки слайд-шоу.Это больше похоже на фотоальбом, где вы можете использовать сочетания клавиш, чтобы сделать некоторые вещи.Итак, слайд-шоу - это целая страница, которая также содержит поля ввода.Следовательно, когда вы пишете текст внутри поля ввода и пытаетесь переместить курсор с помощью клавиатуры (кнопки со стрелками влево и вправо), оно вызовет событие и перейдет к следующему / предыдущему изображению.

Любые идеи поКак включить события keyup на все, но поле ввода?Очевидно, что текущий селектор не работает.

1 Ответ

3 голосов
/ 05 декабря 2011

Если вы хотите придерживаться .delegate() вместо предпочитаемого в настоящее время .on(): 

$(document).delegate(':not(input)', 'keyup', function (e)
{
    if (e.which === 39) $('#next_image').click();
    else if (e.which === 37) $('#prev_image').click();
});
  • jQuery нормализует информацию о коде ключа, поэтому вам нужно толькопроверить event.which

  • Если вам нужно было проверить keyCode и which, (e.keyCode || e.which) == 39 не будет работать должным образом, поскольку || будет оценивать какпервый правдивый операнд или второй операнд, если оба ложные.Другими словами: вам придется проверять каждый из них по отдельности, например: 

    if (e.which === 39 || e.keyCode === 39)
  • Обычно лучше использовать === вместо ==.См. Какой оператор равенства (== vs ===) следует использовать в сравнениях JavaScript?

не работает ... он все еще работаетсобытие keyup внутри <input>

Ах, да.Я думаю, это из-за всплеска событий.

Я видел, как это решается с помощью дополнительного обработчика событий (поля с заголовками imgur в галерее ): 

$('input').live('keyup', function (e) {
    if(!e.ctrlKey && !e.altKey && !e.metaKey) {
        if(e.keyCode==37 || e.keyCode==39 || e.keyCode==13) {
            e.stopPropagation();
        }
    }
    return true;
});

http://jsfiddle.net/mattball/DQusL/

...