jquery 사용법 TAB 키 다운 시뮬레이션:`tabIndex`에 의해 결정된대로 다음 요소에 집중




tabindex 사용법 (4)

Javascript를 사용하여이 작업을 수행하는 간단한 프로그래밍 방식이 없습니다 ... 여기 무차별 적입니다.

W3에 따르면 :

포커스를받을 수있는 요소는 다음 규칙에 따라 사용 도구에 의해 탐색되어야합니다.

  1. tabindex 속성을 지원하고 그것에 양수 값을 할당하는 요소는 먼저 탐색됩니다. 탐색은 가장 낮은 tabindex 값을 갖는 요소에서 가장 높은 값을 갖는 요소로 진행됩니다. 값은 순차적 일 필요가 없으며 특정 값으로 시작해야합니다. 동일한 tabindex 값을 가진 요소는 문자 스트림에 나타나는 순서대로 탐색해야합니다.
  2. tabindex 속성을 지원하지 않거나이를 지원하고 값을 "0"으로 지정하는 요소는 다음으로 탐색됩니다. 이러한 요소는 문자 스트림에 나타나는 순서대로 탐색됩니다.
  3. 비활성화 된 요소는 탭 순서에 참여하지 않습니다.

tabIndex > 0 양식의 요소 순서를 tabIndex 순서로 저장 한 다음 나머지 요소를 문서 내에 나타나는 순서대로 연결하여이 작업을 수행했습니다. 다음 코드는 양식 입력과 문자 'z'가 눌러 졌을 때 탭 키 누르기를 시뮬레이션합니다 (그러나 이것을 원하는 조건으로 변경할 수 있음).

$(':input').keypress(function(e){ 

    // if 'z' pressed
    if (e.which == 122) {

        // if we haven't stored the tabbing order
        if (!this.form.tabOrder) {

            var els = this.form.elements,
                ti = [],
                rest = [];

            // store all focusable form elements with tabIndex > 0
            for (var i = 0, il = els.length; i < il; i++) {
                if (els[i].tabIndex > 0 &&
                    !els[i].disabled && 
                    !els[i].hidden && 
                    !els[i].readOnly &&
                    els[i].type !== 'hidden') {
                    ti.push(els[i]);
                }
            }

            // sort them by tabIndex order
            ti.sort(function(a,b){ return a.tabIndex - b.tabIndex; });

            // store the rest of the elements in order
            for (i = 0, il = els.length; i < il; i++) {
                if (els[i].tabIndex == 0 &&
                    !els[i].disabled && 
                    !els[i].hidden && 
                    !els[i].readOnly &&
                    els[i].type !== 'hidden') {
                    rest.push(els[i]);
                }
            }

            // store the full tabbing order
            this.form.tabOrder = ti.concat(rest);
        }

        // find the next element in the tabbing order and focus it
        // if the last element of the form then blur
        // (this can be changed to focus the next <form> if any)
        for (var j = 0, jl = this.form.tabOrder.length; j < jl; j++) {
            if (this === this.form.tabOrder[j]) {
                if (j+1 < jl) {
                    $(this.form.tabOrder[j+1]).focus();
                } else {
                    $(this).blur();
                }
            }
        }

    }

});

데모보기

두 개의 입력 요소가 있습니다. 첫 번째 요소는 초점이 맞춰졌고 TAB 키 누르기 / keydown 이벤트를 시뮬레이트하여 두 번째 요소에 집중하려고합니다. ( 참고 : .next() 등을 사용하고 싶지 않습니다.)

이것은 이 질문 에서 영감을받은 나의 코드입니다.

$('input').first().focus();

var e = $.Event('keydown');

e.which = 9; // TAB
$(':focus').trigger(e);

http://jsfiddle.net/3PcPH/ 참조하십시오.

코드가 작동하지 않습니다. 뭐가 잘못 되었 니?


기본 탭 동작은 다음 (소스 순서대로) 양식 요소로 이동하여 관심있는 모든 요소를 ​​반복하고 포커스가있는 요소를 찾고 포커스를 다음 요소로 옮길 수 있습니다. 폼 요소를 찾기위한 :input 선택기가 있습니다.

var $all = $('form :input');
var focused = $(':focus')[0];
for(var i = 0; i < $all.length - 1; ++i) {
    if($all[i] != focused)
        continue;
    $all[i + 1].focus();
    break;
}
// Must have been focused on the last one or none of them.
if(i == $all.length - 1)
    $all[0].focus();

데모 : http://jsfiddle.net/ambiguous/Avugy/1/

또는 tabindex 속성을 설정하고 줄 넘김으로 증가시킬 수 있습니다.

var next_idx = parseInt($(':focus').attr('tabindex'), 10) + 1;
var $next_input = $('form [tabindex=' + next_idx + ']');
if($next_input.length)
    $next_input.focus();
else
    $('form [tabindex]:first').focus();

데모 : http://jsfiddle.net/ambiguous/k9VpV/

tabindex 속성 값의 갭을 처리하는 것은 연습으로 남겨 tabindex .



$('input').first().focus();

var e = $.Event('keydown');

e.which = 9; // TAB
$(':focus').bind('keydown',function(e){
    if(e.which == 9){
        //this.value="tab";
        $('input:eq(1)').focus();
    }
   e.preventDefault(); 
});

'keydown'이벤트를 사용자 정의 이벤트 기능에 바인딩해야합니다.





jquery