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之后，它专注于关闭按钮。

请注意，在我的网站上，关闭按钮是＆＃34; X＆＃34;放置在输入字段内的图标（代码看起来相同）。

我做错了吗？

谢谢！
麦克

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"属性。

而是在输入字段上关注按钮

1 个答案: