如何在文本框出现在屏幕上时设置焦点

How to set focus on text box whenever it appears on the screen

本文关键字：设置 屏幕 焦点 文本      更新时间：2023-09-26

我制作了一个web应用程序，它从特定的金额开始，每次捐款都会倒计时，并显示需要多少。有一段时间，我可能会有10-20个这样的倒计时，我总是在创造新的。现在，当我这样做的时候，当我点击按钮时，它会自动聚焦在文本字段上，以便于使用。但是我不能完全做到这一点。

设置倒计时的窗口使用angularjs对话框/模式显示。这意味着，当我单击a按钮时，它会在显示对话框/模态的页面上写入代码，当我提交它时，它将完全从页面中删除。

第一次当我点击按钮时，它会聚焦在文本框上，我可以键入数字并按enter键，它就提交了，现在我想创建一个新的。我点击按钮，模态出现了，但现在我必须抓住鼠标，将其移动到输入并点击它。浪费时间，而且对用户不友好。

我所要求的是，当我每次点击按钮时都使用模态时，有一种方法可以让它集中在文本字段上。

这是窗口：

    <form name="formCountdown" novalidate class="css-form">
    <div modal="showCountdownModal" close="showCountdownModal = false" options="opts" ng-cloak>
        <div class="modal-header">
            <h4>Enter Countdown Amount</h4>
        </div>
        <div class="modal-body">
            <input id="focusbox" type="number" min="1" autofocus required ng-model="countDownAmount" name="countDownAmount" ui-keypress="{13:'setCountdown()'}" select-on-focus />
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary cancel" ng-disabled="formCountdown.$invalid" ng-click="setCountdown()">Set</button>
        </div>
    </div>
</form>

我试过使用自动对焦，加载页面后第一次按下按钮时效果很好。但第二个和第三个则不然。我也尝试过使用这个jquery代码，但没有成功：

<script>
$("#focusbtn").click(function() {
    $("#focusbox").focus();
});
</script>

现在我完全迷失了方向，如果有人能在这里帮助我，我会非常高兴。

编辑：忘记放入超时，以确保浏览器准备就绪！

在setCountDown（）函数中添加以下行：

$timeout(function (){
     document.querySelector('#focusbox').focus();
},0)

您需要在控制器中注入$timeout这可能会奏效！然而，这是可行的，但是dom操作应该在指令中完成！

我把你发布的代码和脚本一起复制了，它运行得很好。我不确定我是否理解这个问题，但自动对焦在我看来效果很好。页面加载或刷新后，甚至单击按钮后，都会出现自动对焦。当然，如果触发了输入文本之外的点击，自动对焦将被取消。

此外，我认为自动对焦是HTML5的一个特性。您可能想在HTML中包含，或者这只是浏览器兼容性问题。您可以在上测试或检查浏览器是否支持自动对焦http://html5test.com/.

希望这能有所帮助。

编辑：

在你的脚本上试试这个。

$(document).ready(function() {
  $(".modalName").on('shown', function() {
    $(this).find("[autofocus]:first").focus(); 
  }); 
});
相关文章：