logo标签列表

如何使用JavaScript在HTML表单中设置元素的焦点？

javascripthtmltextboxfocus
418

我有一个带有文本框的网页表单。如何默认将焦点设置到文本框中？

类似这样：

<body onload='setFocusToTextBox()'>

有人可以帮我吗？我不知道如何使用JavaScript将焦点设置到文本框中。

<script>
  function setFocusToTextBox(){
    //What to do here
  }
</script>
30
就像这样简单：document.getElementById('your_text_box_id').focus();。 - Teemu
2
不是一个答案，但人们也应该知道，在HTML输入标签上只添加autofocus通常就足够了。 - oligofren
13个回答
1

想要分享一些关于这个主题的边缘案例。 如果您的内容正在重新加载（例如API动态DOM加载结果并将焦点设置在结果的第一个项目上），添加属性autofocus将不是您的解决方案，它仅适用于第一次加载，在静态DOM或单页加载中有效。如果你有动态组件加载数据简单的.focus()会失败，因为在focus()时元素尚未被创建，或者blur尚未完成。对于这种情况，期望是添加延迟时间（setTimeout函数）以给新创建或重新创建DOM中的元素应用焦点的时间。我的问题是从API加载数据并聚焦于第一个结果。 添加 var el = document.getElementById(focusId); el.focus(); 解决了问题，因此DOM完成模糊而无需添加延迟。

0

试试这个：

$('.modal').on('shown.bs.modal', function () {
        setTimeout(function() {
                $("input#yourFieldId").addClass('modal-primary-focus').focus();
            },
            500);
    });
0
<input type="text" class="word"> //html code

let theinput = document.querySelector(".word"); //Get the input 
 theinput.focus(); // focus on input
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接