JQuery, как поймать клавишу ввода и изменить событие на вкладку - PullRequest
Новая
       70

JQuery, как поймать клавишу ввода и изменить событие на вкладку

68 голосов
/ 25 февраля 2010

Я хочу решение jquery, я должен быть близко, что нужно сделать? 

$('html').bind('keypress', function(e)
{
     if(e.keyCode == 13)
     {
         return e.keyCode = 9; //set event key to tab
     }
});

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

Ответы [ 19 ]

65 голосов
/ 25 февраля 2010

Вот решение: 

$('input').on("keypress", function(e) {
            /* ENTER PRESSED*/
            if (e.keyCode == 13) {
                /* FOCUS ELEMENT */
                var inputs = $(this).parents("form").eq(0).find(":input");
                var idx = inputs.index(this);

                if (idx == inputs.length - 1) {
                    inputs[0].select()
                } else {
                    inputs[idx + 1].focus(); //  handles submit buttons
                    inputs[idx + 1].select();
                }
                return false;
            }
        });
31 голосов
/ 25 мая 2011

Это прекрасно работает! 

 $('input').keydown( function(e) {
        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
        if(key == 13) {
            e.preventDefault();
            var inputs = $(this).closest('form').find(':input:visible');
            inputs.eq( inputs.index(this)+ 1 ).focus();
        }
    });
8 голосов
/ 28 мая 2013

Почему бы не что-то простое, как это? 

$(document).on('keypress', 'input', function(e) {

  if(e.keyCode == 13 && e.target.type !== 'submit') {
    e.preventDefault();
    return $(e.target).blur().focus();
  }

});

Таким образом, вы не инициируете отправку, если вы уже не сфокусированы на типе ввода «submit», и это ставит вас туда, где вы остановились. Это также делает его работоспособным для входов, которые динамически добавляются на страницу.

Примечание. Функция blur () находится перед фокусом () для всех, у кого могут быть прослушиватели событий «on blur». Для работы процесса нет необходимости.

7 голосов
/ 30 апреля 2012

PlusAsTab : плагин jQuery для использования клавиши numpad plus в качестве эквивалента клавиши табуляции.

PlusAsTab также настраивается для использования клавиши ввода, как в этой демонстрации . См. некоторые из моих старых ответов на этот вопрос .

В вашем случае замена клавиши ввода функциональностью вкладки для всей страницы (после установки клавиши ввода в качестве вкладки в параметрах). 

<body data-plus-as-tab="true">
    ...
</body>
5 голосов
/ 06 апреля 2012

Построение из плагина Бена, эта версия обрабатывает select, и вы можете передать опцию allowSubmit. то есть. $("#form").enterAsTab({ 'allowSubmit': true}); Это позволит войти, чтобы отправить форму, если кнопка отправки обрабатывает событие. 

(function( $ ){
    $.fn.enterAsTab = function( options ) {  
    var settings = $.extend( {
       'allowSubmit': false
    }, options);
    this.find('input, select').live("keypress", {localSettings: settings}, function(event) {
        if (settings.allowSubmit) {
        var type = $(this).attr("type");
        if (type == "submit") {
            return true;
        } 
    }
    if (event.keyCode == 13 ) {
        var inputs =   $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])");
        var idx = inputs.index(this);
        if (idx == inputs.length - 1) {
           idx = -1;
       } else {
           inputs[idx + 1].focus(); // handles submit buttons
      }
        try {
            inputs[idx + 1].select();
            }
        catch(err) {
            // handle objects not offering select
            }
        return false;
    }
});
  return this;
};
})( jQuery );
4 голосов
/ 03 ноября 2013

Это наконец то, что работает для меня отлично. Я использую jqeasyui, и он работает нормально 

$(document).on('keyup', 'input', function(e) {
 if(e.keyCode == 13 && e.target.type        !== 'submit') {
   var inputs =   $(e.target).parents("form").eq(0).find(":input:visible"),
   idx = inputs.index(e.target);
       if (idx == inputs.length - 1) {
          inputs[0].select()
       } else {
          inputs[idx + 1].focus();
          inputs[idx + 1].select();
       }
 }

});
3 голосов
/ 12 июня 2014

Включает все типы входов 

$(':input').keydown(function (e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    if (key == 13) {
        e.preventDefault();
        var inputs = $(this).closest('form').find(':input:visible:enabled');
        if ((inputs.length-1) == inputs.index(this))
            $(':input:enabled:visible:first').focus();
        else
            inputs.eq(inputs.index(this) + 1).focus();
    }
});
3 голосов
/ 05 апреля 2012

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

$.fn.enterAsTab = function () {
  $(this).find('input').live("keypress", function(e) {
    /* ENTER PRESSED*/
    if (e.keyCode == 13) {
        /* FOCUS ELEMENT */
        var inputs =   $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"),
            idx = inputs.index(this);

        if (idx == inputs.length - 1) {
            inputs[0].select()
        } else {
            inputs[idx + 1].focus(); // handles submit buttons
            inputs[idx + 1].select();
        }
        return false;
    }
  });
  return this;
};

Таким образом, я могу сделать $ ('# form-id'). EnterAsTab (); ... Думаю, я отправлю, так как никто еще не опубликовал его как плагин $, и они не совсем интуитивно понятны.

2 голосов
/ 19 октября 2013

Вот что я использовал: 

$("[tabindex]").addClass("TabOnEnter");
$(document).on("keypress", ".TabOnEnter", function (e) {
 //Only do something when the user presses enter
     if (e.keyCode == 13) {
          var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
          console.log(this, nextElement);
           if (nextElement.length)
                nextElement.focus()
           else
                $('[tabindex="1"]').focus();
      }
});

Обращает внимание на tabindex и относится не только к форме, но и ко всей странице.

Замечание live был отменен jQuery, теперь вы должны использовать on

2 голосов
/ 15 марта 2013

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

$('input,select').keydown( function(e) {
  var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  if(key == 13) {
    e.preventDefault();
    var inputs = $('#content').find(':input:visible');
    var nextinput = 0;
    if (inputs.index(this) < (inputs.length-1)) {
      nextinput = inputs.index(this)+1;
    }
    if (inputs.length==1) {
      $(this).blur().focus();
    } else {
      inputs.eq(nextinput).focus();
    }
  }
});
Страница:
...