在 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();
}