Input Time autofocus 属性

在 web 开发中，<input type="time> 是一个常用的 HTML 元素，用于允许用户选择时间。在某些情况下，我们希望页面加载时自动聚焦到这个时间输入框，以提高用户体验。这时就可以使用 autofocus 属性。

什么是 autofocus 属性

autofocus 是一个布尔属性，用于指定页面加载时是否自动将焦点设置在元素上。当autofocus属性存在时，页面加载时该元素会自动获得焦点。

如何在 Input Time 元素上使用 autofocus 属性

在 <input type="time> 元素上使用 autofocus 属性非常简单，只需要在元素上添加 autofocus 即可。

<input type="time" autofocus>

上面的代码片段中，<input type="time> 元素设置了 autofocus 属性，当页面加载时，该时间输入框会自动获得焦点。

示例代码

下面是一个完整的示例代码，演示了如何在一个包含多个时间输入框的表单中，自动将焦点设置在第一个时间输入框上。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Time Autofocus</title>
</head>
<body>
<form>
<label for="time1">Time 1:</label>
<input type="time" id="time1" autofocus>
<br>
<label for="time2">Time 2:</label>
<input type="time" id="time2">
<br>
<label for="time3">Time 3:</label>
<input type="time" id="time3">
</form>
</body>
</html>

在上面的代码中，第一个时间输入框设置了 autofocus 属性，因此页面加载时会自动将焦点设置在第一个时间输入框上。

总结

通过使用 autofocus 属性，我们可以方便地将焦点设置在时间输入框上，提高用户体验。在实际开发中，根据需求合理使用 autofocus 属性，可以让用户更快速地与页面交互。