Кейдаун только с реальными персонажами? - PullRequest
Новая
       30

Кейдаун только с реальными персонажами?

2 голосов
/ 05 января 2012

простой вопрос: У меня есть поля ввода с внутренними метками! Так же, как окно поиска на этом сайте в правом верхнем углу. Когда я начинаю набирать этикетку внутри, она скрыта.

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

inputs.keydown(function (e) {
     $(this).addClass(fill);
});

Все отлично работает, за исключением небольшого недостатка. Всякий раз, когда я фокусирую поле ввода и нажимаю такие клавиши, как «Shift», «Ctrl» или «CMD», ярлык исчезает. Однако это еще не вход!

Есть идеи, как это сделать? 

inputs.keydown(function (e) {
        switch (e.keyCode) {        
            case 13: // Enter
            case 16: // Shift
            case 17: // Ctrl
            case 18: // Alt
            case 19: // Pause/Break
            case 20: // Caps Lock
            case 27: // Escape
            case 35: // End
            case 36: // Home
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down

            // Mac CMD Key
            case 91: // Safari, Chrome
            case 93: // Safari, Chrome
            case 224: // Firefox
            break;
        }

        $(this).addClass(fill);
    });

Это все ключевые коды, где я не хочу размыть ярлык! Просто при наборе реальных символов должен быть добавлен класс заполнения. Btw. Есть ли лучший синтаксис, чтобы написать эти операторы switch во всех случаях?

Ответы [ 3 ]

5 голосов
/ 11 декабря 2012

Используйте keypress() вместо этого, если вы имеете дело с вводом символов.Он уже позаботился о игнорировании большинства ключей, которых вы хотите избежать.Он срабатывает при Enter, но вы можете легко объяснить это тем же способом, который был предложен здесь. 

$("input").keypress(function (e) {
    if( e.which == 13 ){ return false; }
    $(this).addClass(fill);
}
2 голосов
/ 05 января 2012

Это будет выполнять addClass только тогда, когда ни один регистр не будет достигнут: 

inputs.keydown(function (e) {
    switch (e.keyCode) {        
        case 13: // Enter
        case 16: // Shift
        case 17: // Ctrl
        case 18: // Alt
        case 19: // Pause/Break
        case 20: // Caps Lock
        case 27: // Escape
        case 35: // End
        case 36: // Home
        case 37: // Left
        case 38: // Up
        case 39: // Right
        case 40: // Down

        // Mac CMD Key
        case 91: // Safari, Chrome
        case 93: // Safari, Chrome
        case 224: // Firefox
        break;
        default:
          $(this).addClass(fill);
        break;
    }
});

Но так как вы используете jquery и хотите меньшее решение, попробуйте это: 

inputs.keydown(function (e) {
  if($.inArray(e.keyCode,[13,16,17,18,19,20,27,35,36,37,38,39,40,91,93,224])) return;
  $(this).addClass(fill);
});
0 голосов
/ 05 января 2012

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

т.е. Что-то вроде: 

var dataLength = 0;

// use keyup instead of keydown to ensure that we catch the event after the data has been entered
inputs.keyup(function (e) { 
   if($(this).val().length != dataLength) $(this).addClass(fill);

   ... 

   dataLength = $(this).val().length;

   // re-apply placeholder text if no text
   if(dataLength == 0) $(this).removeClass(fill);
}

Еще лучше - использовать плагин событий обмена текстами jQuery. http://www.zurb.com/playground/jquery-text-change-custom-event

...