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

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() 确实在您的 keydown 代码中工作，但您的处理程序在 默认 keydown 处理程序之前触发。 您可以简单地使用 keyup 或 checking output in console 来测试。

JSFiddle Demo

---

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