Question

我正在尝试将焦点设置在隐藏的文本框中。我希望当包含文本框的主体或div加载焦点时，应该在特定文本框上，以便键盘或任何其他设备的任何输入都被此元素捕获。我试过以下代码没有效果：

<body>
    <input type="text" id="exp" maxlength="16"></input>
    <input type="text" id="exp2" maxlength="16"></input>
    <script>
        $("#exp").hide();
        $("#exp").focus();
        $("#exp2").keypress(function(){
            alert($("#exp").val());
        });
    </script>
</body>

提出任何建议。 jquery解决方案将是首选。

Answer 1

您无法将焦点设置为通过hide方法隐藏的文本框。相反，您需要将其移出屏幕。

<body>
<!-- it's better to close inputs this way for the sake of older browsers -->
<input type="text" id="exp" maxlength="16" />
<input type="text" id="exp2" maxlength="16" />
<script>
// Move the text box off screen
$("#exp").css({
    position: 'absolute',
    top: '-100px'
});
$("#exp").focus();
$("#exp2").keypress(function(){
alert($("#exp").val());
});
</script>
</body>

Answer 2

visibility:hidden; 
position: absolute;

适用于Chrome 53，看起来比在Nathan Wall的回答中将元素移出屏幕更清晰。

Answer 3

这可以通过 async/await 实现，其中选择输入的代码仅在显示输入的代码返回其履行的承诺之后运行。

let selectInput = async () => {
    await setInputDisplayBlock();
    document
        .getElementById("input")
        .focus();
};
selectInput();

试图将焦点设置在隐藏的文本框中

3 个答案: