12

我正在尝试将焦点放在隐藏的文本框上。我希望当包含文本框的正文或 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 解决方案将是首选。

4

3 回答 3

14

您不能将焦点设置到通过该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>
于 2012-06-25T06:47:37.113 回答
1
visibility:hidden; 
position: absolute;

在 Chrome 53 中工作,并且似乎比试图将元素移出屏幕更干净,如 Nathan Wall 的回答。

于 2016-10-20T18:23:24.503 回答
0

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

let selectInput = async () => {
    await setInputDisplayBlock();
    document
        .getElementById("input")
        .focus();
};
selectInput();
于 2021-06-18T01:11:27.913 回答