jquery - 专注于按钮而不是输入字段

Question

我有一个输入框和一个关闭按钮。 当页面加载时，它专注于输入文本字段(在 ready 中)但相同的焦点命令 $("#param_pattern_value").focus(); 在其他函数中(当单击 tab)将焦点放在关闭按钮上而不是文本输入字段上。

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() 实际上确实在您的 keydown 代码中起作用，但您的处理程序恰好在 默认 keydown 处理程序。 您可以简单地使用 keyup 或 checking output in console 来测试它.

JSFiddle Demo

---

如果您只是不想让 X 按钮获得焦点，请在按钮上设置 tabindex="-1" 属性。