基于输入键的 Tabindex 通过获取表单元素在 Jquery 中不起作用答案

【问题标题】：Tabindex based on enter key by getting form elemens not working in Jquery基于输入键的 Tabindex 通过获取表单元素在 Jquery 中不起作用
【发布时间】：2011-06-05 16:38:48
【问题描述】：

我有一个表单，我可以通过serializeArray() 获取所有表单元素。我想focus() 使用输入键根据它们的 tabindex 值在表单元素上。只有当它有价值或专注于它自己。

对 jQuery 不太熟悉，所以如果有任何错误...

$.fn.entertab = function()
  {

 var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var maxTabIndex = 20;
        var elements = this.serializeArray();
     $.each(elements, function(i, element)
        {

 this.keypress(function(e){ 
    var nTabIndex=this.tabIndex;
       var myNode=this.nodeName.toLowerCase();
            if(nTabIndex > 0 && key == 13 && nTabIndex <= maxTabIndex && ((!myNode.attr("disabled")) || (myNode.val == "")))
      {
   myNode.focus(); 
   }
   else
   {
   nTabIndex=this.tabIndex+1;
      myNode.focus();
   }
   });

     });
        }
  $("theform").entertab();

【问题讨论】：

您能提供您正在使用的 HTML 吗？直到几个建议：移动 var key... 在 this.keypress 函数中，使用 onload/ready 状态启动 entertab(): $(function(){/*这里是代码*/});并且您使用的是“theform”，这不是标签名称，如果它是类名，则使用 $(".theform").entertab();

标签： jquery key tabindex enter

【解决方案1】：

你也可以试试这个 HTML

<input id="122" class='TabOnEnter' tabindex="1" /><br>
<input id="123" class='TabOnEnter' tabindex="2" /><br>
<input id="124" class='TabOnEnter' tabindex="4" />This input is hidden<br>
<input id="124" class='TabOnEnter' tabindex="5" /><br>
<input id="125" class='TabOnEnter' tabindex="3" /><br>
<textarea class='TabOnEnter' tabindex="6">Hi, I am a test area</textarea>

脚本 ///////////

$(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();  
    }   
  });

//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut();  })

///////////// 在 EI、Chrome、Mozilla 中运行良好。未在 safari 和其他浏览器中测试

【讨论】：

【解决方案2】：

我想我明白你想做什么。我重写了你的代码，结果是这样的：

(function($){

    $.fn.entertab = function(options) {

        var defaults = {
            maxTabIndex: 20
        };

        options = $.extend({}, defaults, options);

        return this.filter('form').each(function(){

            var $this = $(this),
                $elms = $this.find("[tabindex]");

            $elms.each(function(){
                var $elm = $(this),
                    idx = parseInt($elm.attr("tabindex"));
                if (idx > options.maxTabIndex) {
                    return;
                }
                $elm.keydown(function(e){
                    if (e.which == 13 && ($elm.val() != '')) {
                        $elms.filter("[tabindex="+(idx+1)+"]").focus();
                        e.preventDefault();
                    }
                });
            });
        });
    };

})(jQuery);

jsFiddle 上有一个工作示例。

【讨论】：

@ullasvk，没问题，但这回答了你的问题吗？如果是这样，请接受这个答案。
@MarcusEkwall 它确实有效，另外还有一个，提问者必须将此标记为答案：/
你的 jsfiddle 只能通过点击“tab key”而不是“enter key”来工作！！