Question

我制作了一个网络应用程序，从特定数量开始，每次捐赠时，它都会倒计时并显示需要多少钱。而且有一次我可能有大约10-20个倒计时，我总是创造新的。现在，当我这样做时，当我点击按钮时，它会自动聚焦在文本字段上以方便使用。但是我无法让它发挥作用。

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

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

我要问的是，每次单击按钮时使用模态时，都要将注意力集中在文本字段上。

这是窗口：

    <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>

现在我完全迷失了，如果有人能帮助我，我真的很喜欢。

Answer 1

我将您发布的代码与脚本一起复制，它运行得很好。我不确定我是否理解了这个问题，但自动对焦在我的最终中运作良好。页面加载或刷新后甚至在单击按钮后都会出现自动对焦。当然，如果触发了输入文本之外的单击，则将删除自动对焦。

更多，我认为自动对焦是HTML5的一个属性。您可能希望包含在HTML中，或者只是浏览器兼容性问题。您可以在http://html5test.com/处测试或检查浏览器是否支持自动对焦。

希望以某种方式帮助。

编辑：

在你的剧本上试试这个。

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

Answer 2

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

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

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

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

如何在屏幕上显示时将焦点设置在文本框上

2 个答案: