입력란에 버튼 대신 초점 맞추기

Question

입력란과 닫기 버튼이 있습니다. 페이지를로드 할 때 입력 텍스트 필드 (ready)에 초점을 맞추지 만 다른 기능 (tab 클릭시)에서 동일한 포커스 명령 $("#param_pattern_value").focus();은 텍스트 입력 필드 대신 닫기 버튼에 초점을 맞 춥니 다.

HTML :

<div tabindex="-1" class="layout-column layout-gt-xs-row layout-align-start-center layout-margin"> 
<div tabindex="-1" class="classic-text-input mdl-textfield mdl-js-textfield mdl-textfield--floating-label flex"> 
    <input tabindex="0" class="mdl-textfield__input" type="text" id="param_pattern_value" value="enter text"> 
    <label class="mdl-textfield__label" for="param_pattern_value"> 
     <span>enter 1</span> 
    </label> 

    <button tabindex="0" class="mdl-button mdl-js-button mdl-button--icon mdl-button--accent margin-left clear_icon_in_input"> 
     <i class="material-icons mdl-textfield__label__icon">close</i> 
    </button> 

</div> 
</div> 

JS는 :

$(document).ready(function() { 
    $('#param_pattern_value').focus() 
}); 

$("body").keydown(function(e){ 
     var TAB  = 9; 
     var key = e.which; 

     if (key == TAB){ 
        $("#param_pattern_value").focus(); 
     } 
    }); 

LINK TO JSFIDDLE

나는 많은 변화를 시도했지만 항상 tab를 클릭 한 후이 닫기 버튼에 초점을 맞추었다.

내 사이트에서 닫기 버튼은 입력 필드 (코드는 동일하게 보입니다)에 배치 된 "X"아이콘입니다.

내가 잘못 했나요?

감사합니다. TAB 키가 발생할 때마다 당신이 #param_pattern_value 입력 필드에 포커스를 설정하려면
마이크

Answer 1

, 당신은이 .preventDefault() 추가 할 수 있습니다 다음 $("#param_pattern_value").focus() 실제로에서 작업을 수행하는 것이,

$("body").keydown(function(e){ 
    var TAB = 9; 
    var key = e.which; 

    if (key == TAB){ 
     e.preventDefault(); 
     $("#param_pattern_value").focus(); 
    } 
}); 

주의하세요 keydown 코드이지만 처리기가 기본값 인keydown 처리기 바로 전에 발생합니다. 대신 keyup 또는 checking output in console을 사용하여 간단히 테스트 할 수 있습니다.

---

당신은 단순히 X 버튼이 집중되지 않도록하려면

JSFiddle Demo

는 버튼을 tabindex="-1" 속성을 설정합니다.