专注于按钮而不是输入框

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();
        }
    });

JSFIDDLE链接

我尝试了许多变化，但在点击“选项卡”后它总是聚焦于关闭按钮。

请注意，在我的网站上，关闭按钮是一个放置在输入字段内部的“X”图标（代码看起来相同）。

我做错了什么吗？

谢谢！
Mike

- Mike

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 进行简单测试，或者检查控制台输出。 JSFiddle 演示

---

如果您不希望聚焦在 X 按钮上，请在按钮上设置 tabindex="-1" 属性。

- Artur Filipiak

---

谢谢！它解决了问题。对于其他类似的问题也是个好的提示。我需要这个按钮获得焦点，所以我会留下tabindex="0"。 - Mike