2011-01-08 3 views
0

저는 양식이 있으며 serializeArray()을 통해 모든 양식 요소를 가져올 수 있습니다. Enter 키를 사용하여 tabindex 값을 기반으로 양식 요소에 focus()을 입력하고 싶습니다. 가치가 있거나 그 자체에 집중하는 경우에만. jQuery를에 Tabindex는 Jquery에서 작동하지 않는 elemens를 입력하여 Enter 키를 기반으로합니다

리틀 새로운

$.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(); 
+0

사용중인 HTML을 제공 할 수 있습니까? 몇 가지 제안을 할 때까지 : var 키를 움직이면 ... this.keypress 함수 안에서 onload/ready 상태를 사용하여 entertab()을 시작합니다 : $ (function() {/ * here the code * /}); 그리고 당신은 "theform"을 사용하고 있습니다, 태그 이름이 아닌 경우, 클래스 이름이라면 $ (". theform")을 사용하십시오 .. entertab(); –

답변

0

... 실수 그래서 만약 내가 당신이 원하는 것을 이해 생각합니다. 난 당신의 코드를 재 작성이 함께 결국 : jsFiddle에 동작하는 예제가

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

입니다.

+2

@ullasvk, 문제 없지만이 답변을 귀하의 질문에 했습니까? 그렇다면이 대답을 수락하십시오. – mekwall

+0

@MarcusEkwall 질문에 답변을 표시해야합니다./ –

+0

jsfiddle은 "enter key"가 아닌 "tab key"를 치면 작동합니다! –

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> 

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 및 다른 브라우저에서 테스트되지 않았습니다.

관련 문제