通过获取表单元素在jQuery中不起作用，基于Enter键的Tabindex [英] Tabindex based on enter key by getting form elemens not working in Jquery

问题描述

我有一个表单，并且能够通过serializeArray()获取所有表单元素. 我想使用Enter键基于表单元素的tabindex值对表单元素进行focus().仅当它具有价值或专注于自身时.

I have a form, and I am able to get all form elements through serializeArray(). I want to focus() on form elements based on their tabindex value using enter key. Only if it has value in it or else focus on itself.

jQuery的新功能很少，所以如果有任何错误...

Little new to jQuery so if any mistakes...

$.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

You can also try this 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>

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

SCRIPT ///////////

$(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和其他浏览器测试

////////////// Worked Fine in EI,Chrome, Mozilla . not tested in safari and other browser

这篇关于通过获取表单元素在jQuery中不起作用，基于Enter键的Tabindex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！