양식 요소에서 탭 포커스 비활성화

양식 요소에서 탭 포커스 비활성화

---

div동일한 형식 내에 여러 s가 있습니다. 내가하려는 것은 동일한 양식 의 다른 탭을 비활성화하지 않고 양식 Tab의 divs 중 하나 에서 키 를 비활성화하는 것입니다 div.

예제 양식 :

• div1-비활성화 Tab
• div2- Tab작동
• div3- Tab작동

---

간단한 방법은 탭으로 지정하지 않으려는 필드에 tabindex = "-1"을 입력하는 것입니다. 예

<input type="text" tabindex="-1" name="f1">

---

Yipio와 마찬가지로 notab="notab"탭을 비활성화하고 싶은 요소에 속성으로 추가 했습니다. 내 jQuery는 한 줄입니다.

$('input[notab=notab]').on('keydown', function(e){ if (e.keyCode == 9)  e.preventDefault() });

Btw keypress는 많은 제어 키에서 작동하지 않습니다.

---

Terry의 간단한 대답을 기반으로 이것을 기본 jQuery 함수로 만들었습니다.

$.prototype.disableTab = function() {
    this.each(function() {
        $(this).attr('tabindex', '-1');
    });
};

$('.unfocusable-element, .another-unfocusable-element').disableTab();

---

내 경우는 일반적이지 않을 수 있지만 내가 원하는 것은 특정 열을 TABLE완전히 "불활성"상태 로 두는 것이 었습니다. 탭으로 이동할 수없고 그 안에있는 항목을 선택할 수도 없습니다. 다른 SO 답변에서 "선택할 수없는"클래스를 찾았습니다.

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

이것은 실제로 사용자가 마우스를 사용하여 초점을 맞추는 것을 방지합니다 TD...하지만 SO에서 셀로 탭하는 것을 방지하는 방법을 찾을 수 없습니다. TDs내 TABLE실제로 각이있는 DIV자신의 유일한 자녀, 그리고 사용하는 것과 console.log나는 것을 발견은 사실 DIVs(처음에 의해 얻어진다 초점없이 초점을 얻을 것이다 TDs).

내 솔루션은 "이전에 초점을 맞춘"요소 (페이지의 모든 위치)를 추적하는 것입니다.

window.currFocus = document;
//Catch any bubbling focusin events (focus does not bubble)
$(window).on('focusin', function () {
  window.prevFocus = window.currFocus;
  window.currFocus = document.activeElement;
});

이런 종류의 메커니즘 없이는 어떻게 지낼 수 있을지 모르겠습니다. 모든 종류의 목적에 유용합니다. 물론 최근에 집중된 요소의 스택으로 변환하는 것은 간단합니다. 원한다면 ...

가장 간단한 대답은 다음과 같이하는 것입니다 ( DIV새로 생성 된 모든 자식에게 TD).

...
jqNewCellDiv[ 0 ].classList.add( 'unselectable' );
jqNewCellDiv.focus( function() {
    window.prevFocus.focus();
});         

여태까지는 그런대로 잘됐다. 자녀 TD가없는 경우에만 이것이 효과가 있다는 것이 분명해야합니다 DIV. 사소한 문제 : 이것은 트랙에서 죽은 탭을 중지합니다. 테이블에 해당 행에 더 많은 셀이 있거나 가장 분명한 작업 아래 행이 있다면 탭 탭을 선택 불가능한 다음 셀로 이동하는 것입니다. 같은 행에 있거나 다른 행이있는 경우, 아래 행에. 테이블의 맨 끝에 있으면 좀 더 까다로워집니다. 즉, 탭은 어디로 가야하나요? 그러나 모든 좋은 청소 재미.

---

입력 요소를 다루는 경우 포인터 포커스를 뒤로 설정하는 것이 유용하다는 것을 알았습니다.

$('input').on('keydown', function(e) { 
    if (e.keyCode == 9) {
        $(this).focus();
       e.preventDefault();
    }
});

---

개별 요소를 비활성화하거나 활성화해야합니다. 이것이 내가 한 방법입니다.

$(':input').keydown(function(e){
     var allowTab = true; 
     var id = $(this).attr('name');

     // insert your form fields here -- (:'') is required after
     var inputArr = {username:'', email:'', password:'', address:''}

     // allow or disable the fields in inputArr by changing true / false
     if(id in inputArr) allowTab = false; 

     if(e.keyCode==9 && allowTab==false) e.preventDefault();
});

---

$('.tabDisable').on('keydown', function(e)
{ 
  if (e.keyCode == 9)  
  {
    e.preventDefault();
  }
});

모든 탭에 .tabDisable을 넣어 DIV를 다음과 같이 비활성화하십시오.

<div class='tabDisable'>First Div</div> <!-- Tab Disable Div -->
<div >Second Div</div> <!-- No Tab Disable Div -->
<div class='tabDisable'>Third Div</div> <!-- Tab Disable Div -->

ReferenceURL : https://stackoverflow.com/questions/3682812/disabling-tab-focus-on-form-elements