2014-01-06 1 views
0

녹아웃 바인딩이있는 KendoUI 컨트롤을 사용하는 페이지가 있으며 Tab 키 대신 Enter 키를 사용하여 컨트롤을 탐색해야합니다. 녹아웃 바인딩 및 KendoUI 드롭 다운이있는 탭으로 입력 사용

나는 (내 코드에 대한 jQuery $ 대신 J의 $를 사용

ko.bindingHandlers.nextFieldOnEnter = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     j$(element).on('keydown', 'input, select', function (e) { 
      var self = j$(this) 
       , form = j$(element) 
       , focusable 
       , next 
      ; 
      var tabElements = 'input,a,select,button,textarea'; 
      if (e.shiftKey) { 
       if (e.keyCode === 13) { 
        focusable = form.find(tabElements).filter(':visible'); 
        prev = focusable.eq(focusable.index(this) - 1); 

        if (prev.length) { 
         prev.focus(); 
        } else { 
         form.submit(); 
        } 
       } 
      } 
      else 
      if (e.keyCode === 13) { 
       focusable = form.find(tabElements).filter(':visible'); 
       var nextIndex = focusable.index(this) === focusable.length - 1 ? 0 : focusable.index(this) + 1; 
       next = focusable.eq(nextIndex); 
       next.focus(); 
       return false; 
      } 
     }); 
    } }; 

Andre Van Zuydam에 의해 제안이-입력 시프트 Damien Sawyer에 의해 게시 솔루션 here을 사용하고 그것을 강화하여 잘 작동하도록 관리하는 때문에 프로젝트도 mootools를 사용하고 jquery를 j $로 다시 정의했습니다.)

그러나 kendoUI DropDown 목록에 문제가 있습니다. 문제가 아니거나 요소이므로 초점을 얻지 못합니다 (대신 특수 클래스 및 unselecteable = "on"속성이있는 범위).

입력시 드롭 다운으로 포커스를 설정하려면 어떻게해야합니까? 내가 이걸 테스트 할 수있는 검도 샘플을하지 않고 내가 할 수있는 최선을 다하고 탭으로

감사

+0

그것은 소리. 현재 코드가 어떻게 생겼는지 게시 할 수 있습니까? [피들] (http://jsfiddle.net)을 만들 수 있습니까? – Goose

+0

네,하지만 어떻게 해야할지 모르겠습니다. 나는 그 코드와 링크로 게시물을 업데이트하여 어디서부터 해결책을 얻었 을까? – bzamfir

답변

1

작동,하지만 난 당신이 이것을 달성 할 수 있어야한다고 생각합니다. Kendo가 드롭 다운을 만들 때 말했듯이 다른 요소가 추가되고 일반 select 요소와 동일한 방식으로 포커스가 제공되지 않습니다. 그러나 검도 선택을 찾으려면 먼저 k-dropdown 클래스의 상위 스팬을 찾아야합니다.

시도 클래스 선택기로 tabElementsk-dropdown를 추가 :

다음
var tabElements = 'input,a,select,button,textarea,.k-dropdown'; 

, 당신은 검도 드롭 다운 메뉴를 확인하기 위해 조건을 추가하여 포커스를 어디에 부분을 조정합니다. 그래서 대신에 그냥이 :

prev.focus(); 

이 같은 것을보십시오 : 검도가 드롭 다운 당신이 조금을 사용자 정의해야합니다 같은

if (prev.hasClass('k-dropdown')) { 
    prev.children('select').first().data("kendoDropDownList").focus(); 
} else { 
    prev.focus(); 
}