在 JavaScript 中设置 HTML 表单元素的焦点

Nithin Krishnan 2023年1月30日 2021年7月4日
  1. 使用 JavaScript 在输入中设置焦点
  2. 使用 JavaScript 在 Textarea 中设置焦点
  3. 使用 JavaScript 在选择框或下拉菜单中设置焦点
在 JavaScript 中设置 HTML 表单元素的焦点

专注于用户输入的字段是一种 UI/UX 功能,允许用户在不单击字段的情况下继续在字段中输入。我们可能需要动态地将焦点应用到表单域上,尤其是当表单很长并且有很多输入域时。如果表单字段存在验证错误,用户将很难在这种情况下找出该字段。因此,将焦点设置到 javascript 中的字段,同时验证并自动滚动到错误字段,将错误直接指示给用户,而不是浪费时间找出错误所在。在 JavaScript 中,我们有 .focus() 方法。让我们看看如何将这些应用于以下内容。

使用 JavaScript 在输入中设置焦点

为了关注输入字段,我们首先需要选择该字段。有多种方法可以做到这一点。我们可以使用以下任何一种方法。

  • document.getElementById():根据元素的 id 查询元素。通常 id 是唯一的,因此 getElementById() 函数唯一地返回元素。如果有更多具有相同 id 的元素,则返回具有指定 id 的第一个元素。
  • document.getElementsByClassName():根据类名选择元素。它通常返回符合条件的元素数组。
  • querySelector():JavaScript 方法根据元素的 id、类名,甚至是 HTML 元素的标签来选择元素。该函数返回满足作为参数传递给它的条件的单个 HTML 元素。在本文中,我们将使用 getElementById() 函数来简化表示。一旦我们选择了元素,我们就可以使用 .focus() 方法将焦点设置在该元素上。以下是 .focus 的语法。
document.getElementById("input-id").focus();

将焦点设置在输入字段上

以下代码将焦点设置在页面加载时的输入字段上。

<input id="username-input" type="text" name="username">
window.onload = function () {
    document.getElementById("username-input").focus();
}

将焦点设置在 HTML 表单中的输入字段上

如果输入元素是表单的一部分,我们可以使用表单名称引用,而不是使用 getElementById() 查询元素。用法的语法如下:

document.<Form name>.<Field name>.focus();

例如,假设我们有一个带有输入字段的登录表单。我们可以通过应用以下代码来设置输入字段的焦点。代码将设置焦点在用户名输入字段上。在使用表单名称和字段名称以让以下代码工作时,需要注意的事情很少。

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
</form>
window.onload = function () {
    document.LoginForm.UserName.focus();
}

评论

  • 在表单中设置输入的焦点时,我们必须将 name 属性分配给 HTML 表单和我们要定位的字段。如果未指定名称,将很难查询元素。
  • 此方法不支持此方法中带有连字符的标签名称。因此,分配给 HTML 表单或元素的名称应该是驼峰式大小写(如用户名)或小写(如用户名)。
  • 对于具有许多字段(如输入、文本区域等)的较长表单,最好为元素设置滚动属性,以便浏览器将焦点 HTML 元素自动滚动到视图中。这是用户期望的预期行为。否则他最终会想知道为什么表格无效。
document.getElementById("myButton").focus({preventScroll:false});

使用 JavaScript 在 Textarea 中设置焦点

我们可以使用 .focus() 函数将焦点设置到文本区域。通常,为了聚焦在文本区域,我们使用 document.getElementById("my-text-area").focus()。它类似于在输入字段中使用 .focus() 函数。如果我们打算在 HTML 表单标签内使用文本区域,那么我们可以应用表单名称引用和文本区域名称来关注它。参考以下代码。

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
</form>
window.onload = function () {
    document.LoginForm.description.focus();
}

在此方法中,我们必须为表单和目标 HTML 元素指定一个名称。元素的命名规则与输入字段的命名规则相同。

使用 JavaScript 在选择框或下拉菜单中设置焦点

.focus() 方法适用于选择框或下拉列表。如果在表单中使用,则可以使用 document.FormName.SelectBoxName.focus() 将焦点设置到下拉列表。以下是详细说明用法的代码。

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>
window.onload = function () {
    document.LoginForm.occupationSelect.focus();
}