入力フィールドの代わりにボタンをフォーカス

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"アイコンです（コードは同じように見えます）。

何か間違っていますか？

ありがとうございます！
マイク

Answer 1

あなたはTABキーが発生するたびに#param_pattern_value入力フィールドにフォーカスを設定したい場合は、.preventDefault()を追加することができます。

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

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

$("#param_pattern_value").focus()は実際にあなたに動作しないことに、注意してください​​コードですが、ハンドラはのデフォルトの​​ハンドラの直前で発生します。 代わりにkeyup、またはchecking output in consoleを使用して簡単にテストできます。

JSFiddle Demo

---

あなたは、単にXボタンを集中させたくない場合は、ボタンの上にtabindex="-1"属性を設定します。