2012-12-18 7 views
1

나는 쉽게 변경할 수없는 in-mixed legacy freetext HTML을 사용하여 고급 eform 응용 프로그램을 유지 관리하고 있습니다. 이전에는 tabindex를 사용하지 않았으므로 문자 스트림 순서에 의존했습니다. 내가 할 수있는, 레거시/이전에 추가 입력 페이지에 렌더링됩니다HTML - 그룹화 된 tabindexes; 레거시 HTML 코드 중간에 tabindexes

 
|-----|-----|-----| 
| 1 | 3 | 5 | 
|-----|-----|-----| 
| 2 | 4 | 6 | 
|-----------------| 

방법 : 페이지의 중간에

, 나는 다음과 같은 사용자 정의 탭 순서로 입력을 포함하는 테이블을 소개합니다 실제로 동적으로/중심적으로 변경하여 순서대로 출력 탭 인덱스를 만듭니다. 예를 들면 :

 
[Input, tabindex: 1] 

|-----|-----|-----| 
| 2 | 4 | 6 | 
|-----|-----|-----| 
| 3 | 5 | 7 | 
|-----------------| 

[Input, tabindex: 8] 

그러나 자유 텍스트 HTML 앵커 (나는 정규식 논리 꽤 추가하지 않는 한 그렇게 쉽게 그들에게의 tabindex를 추가 할 수 없습니다) 동적으로 렌더링되지 않는, 나타나기 시작할 때 문제가 나타납니다. 그래서 다음 탭 이동이된다 :에 탭 할 수없는 링크 하게

 
[Input, tabindex: 1] 

|-----|-----|-----| 
| 2 | 4 | 6 | 
|-----|-----|-----| 
| 3 | 5 | 7 | 
|-----------------| 

[anchor link] 
[Input, tabindex: 8] 

합니다. 이보다 더 진전 된 사례가 있을지 모르지만 그 문제는 이해할 만하다고 생각합니까? 에 점프, 그냥 이전 작업을 탭 이동 가질 수 있도록

 
[tabgroup1] 
[Input] 
[/tabgroup1] 

[tabgroup2] 
|-----|-----|-----| 
| 1 | 3 | 5 | 
|-----|-----|-----| 
| 2 | 4 | 6 | 
|-----------------| 
[/tabgroup2] 

[tabgroup3] 
[anchor link] 
[Input] 
[/tabgroup3] 

:

그래서 내 질문은 어떻게 든의 의미에서의 tabindex 그룹 였을를 할당 할 수 있습니다 ...이입니다 입력에서부터 가장 가까운 앵커, 다음 입력 등의 문자 스트림의 순서. 그러나 [tabgroup2] 내부에서는 탭 인덱스 순서대로 이동하지만 [tabgroup2] 및 탭으로 계속 이동합니다. on 모든 요소가 마치 인 경우 tabindex = "0"


내가 찾고있는 몇 가지 마법의 HTML 솔루션 (가능성은 희박합니다) 또는 이런 식으로 구현할 수있는 비교적 간단한 자바 스크립트 라이브러리입니다.

또는 이것이 실제로 존재하지 않는다면, 구현하려고하면 몇 가지 대안 아이디어 나 가능한주의 사항을 듣는 것이 흥미로울 것입니다.

+0

당신은 HTML 렌더링 후 탭 인덱스를 추가 할 jQuery를 사용할 수 있어야합니다. 추가 된 앵커 태그가있는 렌더링 된 HTML의 예를 제공 할 수 있습니까? –

답변

0

좋아, 나는 이것을 내 자신의 코드로 해결했다. 그 결과 자바 스크립트는 다음과 같습니다 다음의 tabindex 일반 문자 스트림의 순서를 따르지 곳 요소의 알려진 그룹 내에서의 오프셋 (offset)를 제외하고, 더 tabindexes을 사용하지 나를 수

function updateTabIndex() { 
    $('a, area, button, input, object, select, textarea').each(function(i, e) { 
     var element = $(e); 

     var tabIndex = i; 
     if (element.attr('data-tabindexoffset')) { 

      var tabgroup = $(element.closest('[data-tabgroup]')); 
      if (!tabgroup.attr('data-tabindexstart')) { 
       tabgroup.attr('data-tabindexstart', tabIndex); 
      } 

      var tabIndexStart = parseInt(tabgroup.attr('data-tabindexstart')); 
      tabIndex = tabIndexStart + parseInt(element.attr('data-tabindexoffset')); 
     } 

     $(e).attr('tabindex', tabIndex); 
    }); 
} 

$(function() { 
    updateTabIndex(); 
}); 

합니다. 그룹 뒤의 tabindexes는 항상 동일하기 때문에 꽤 잘 작동하는 것 같습니다. 그 사이에 순서가 재정립 된 것뿐입니다.

AJAX 호출에서 요소가 추가 및 제거되면 모든 인덱스를 다시 계산해야하는 등의 문제가있는 유일한 문제입니다. 그러나 그것은 상당히 빨라야합니다.

예 HTML은 다음과 같습니다

<table data-tabgroup="1"> 
    <tr> 
     <td><input type="text" name="b" data-tabindexoffset="0" value="1" /></td> 
     <td><input type="text" name="c" data-tabindexoffset="2" value="3" /></td> 
    </tr> 
    <tr> 
     <td><input type="text" name="d" data-tabindexoffset="1" value="2" /></td> 
     <td><input type="text" name="e" data-tabindexoffset="3" value="4" /></td> 
    </tr> 
</table> 

<a href="#">A link</a> 
<input type="text" name="f" />