jQuery를 사용하여 양식에 탭 포함

Question

jQuery를 사용하여 양식과 같은 컨테이너로 탭핑을 제한하는 최선의 방법. 컨테이너의 마지막 입력 컨트롤에 도달하면 탭을 눌러 컨테이너의 첫 번째 입력 컨트롤로 돌아가고 싶습니다.

"탭 그룹"을 벗어나는 유일한 방법은 외부에서 클릭하는 것입니다.

DOM에 여러 양식이 있지만 일부는 화면 오른쪽에서 벗어나 있기 때문에이 작업을 수행하려는 이유가 있습니다. 필요할 때만 볼 수 있습니다.

사람이 눈에 보이는 양식을 넘어 탭을 벗어나 화면 밖의 양식으로 이동하면보기 화면이 튀어 나와 매우 바람직하지 않은 문제입니다.

어떤 도움을 주셔서 감사합니다. 감사.

Answer 1

기본적으로 jQueryUI를 사용하여 필요한 것을 얻을 수있었습니다. 내 초안은 다음과 같습니다.

(function ($) 
{ 
    $.widget("ui.tabLock", 
    { 
     options: 
     { 
      selector: ":tabbable" //jQuery selector for finding tabbable controls 
     }, 

     _create: function() 
     { 
      //Store 1st & last tabbable control 
      var c = $(this.options.selector, this.element); 
      this.firstCtrl = c.eq(0); 
      this.lastCtrl = c.last(); 

      this._wireEvents(); 
     }, 

     destroy: function() 
     { 
      $.Widget.prototype.destroy.call(this); //jqueryUI 1.8 
     }, 

     _wireEvents: function() 
     { 
      var self = this; 

      //Cycle on last input 
      this.lastCtrl.on("keydown." + this.widgetName, function (e) 
      { 
       if (e.which === 9 && !e.shiftKey) 
       { 
        self.firstCtrl.focus(); 
        return false; 
       } 
      }); 

      //Cycle on first input 
      this.firstCtrl.on("keydown." + this.widgetName, function (e) 
      { 
       if (e.which === 9 && e.shiftKey) 
       { 
        self.lastCtrl.focus(); 
        return false; 
       } 
      }); 
     } 
    }); 

} (jQuery)); 

Answer 2

와우, 또 다른 탭 문제. 나는 비슷한 문제가 있었고 작은 jQueryUI 플러그인을 만들어 탭에 영향을 미치는 필드를 제한했다. 당신은 단순히 그것을 사용 :

$(".someGroup").tabGuard(); 

그리고 그 탭을 .someGroup 래퍼 내부 필드를 반복하게됩니다. 이렇게하면 여러 가지 양식을 페이지에 그룹화 할 수 있으며 포커스가있는 양식은 TAB 또는 Shift + Tab을 계속 반복합니다. 여기 찾기 :

http://tomaszegiert.seowebsolutions.com.au/tabguard/index.htm

나는 누군가가 유용 바랍니다.