jquery如何捕获输入键并将事件更改为选项卡

pay*_*ing 70 jquery events keyevent

我想要一个jquery解决方案,我必须接近,需要做什么?

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

我可以返回false并且它阻止按下回车键,我想我可以将keyCode更改为9以使其成为选项卡但它似乎不起作用.我必须接近,发生了什么事?

Sar*_*raz 70

这是一个解决方案:

$('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;
            }
        });
Run Code Online (Sandbox Code Playgroud)

  • 这个解决方案对我来说并不是那么好看.一方面,它不关注"tabindex"属性.此外,它特定于表单和输入元素,而(原因未知)原始提问者显然希望效果在整个页面中是全局的. (6认同)

Bha*_*rat 31

这完美!

 $('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();
        }
    });
Run Code Online (Sandbox Code Playgroud)

  • 它不适用于Select和表单外的文本字段.你能否修改它以适用于表格外的选择和任何领域. (2认同)
  • @bjan只需更改jquery选择器 (2认同)
  • @AndzejMaciusovic,这完全是误导`$('input')。keydown(...`是`$('input')。on(“ keypress” ...`'的简写。它们都是同一回事。你有证明吗? (2认同)

rpe*_*rce 8

为什么不这样简单?

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

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

});
Run Code Online (Sandbox Code Playgroud)

这样,除非您专注于"提交"的输入类型,否则不会触发提交,并且它会将您置于您离开的位置.这也使它适用于动态添加到页面的输入.

注意:对于可能具有任何"on blur"事件侦听器的任何人,blur()位于焦点()前面.该过程无需工作.


Joe*_*rra 7

PlusAsTab:一个jQuery插件,使用numpad plus键作为tab键等价物.

PlusAsTab也可配置为使用此演示中的回车键.看看 对这个问题的一些旧答案 .

在您的情况下,使用整个页面的选项卡功能替换回车键(在选项中将回车键设置为选项卡后).

<body data-plus-as-tab="true">
    ...
</body>
Run Code Online (Sandbox Code Playgroud)


Man*_*man 5

从Ben的插件构建此版本处理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 );
Run Code Online (Sandbox Code Playgroud)


Kam*_*med 5

这是我一直在使用的:

$("[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();
      }
});
Run Code Online (Sandbox Code Playgroud)

注意tabindex不是特定于表单而是整个页面。

Note live已被 jQuery 废弃,现在您应该使用on