autofocus HTML5 属性的使用


HTML5 带来了巨大的进步。现在,基本的 HTML 可以执行以前由 JavaScript 和 Flash 处理的任务,例如基本的表单验证、INPUT 占位符以及音频/视频。HTML 中的 autofocus 属性允许我们在页面加载时自动将焦点设置到组件上,这是一个非常简单的功能。

当存在 autofocus 属性时,页面加载时,INPUT、TEXTAREA 或 BUTTON 元素将被选中。此属性在主要目的是信息收集的页面上特别有用。

Autofocus HTML5 属性

根据 autofocus 全局属性(一个布尔属性),页面加载时或其所属的 `` 元素显示时,应将焦点设置到某个元素上。每个文档或对话框中只能有一个元素具有 autofocus 属性。如果使用了多个元素,则第一个元素将获得焦点。

语法

以下是 autofocus HTML5 属性的语法

<input name="q" autofocus />

让我们来看下面的例子,以便更好地理解 autofocus HTML5 属性的使用。

示例

在下面的示例中,我们使用 HTML autofocus 属性用于 input 类型。

<!DOCTYPE html>
<html>
   <body>
      <h1>The autofocus attribute</h1>
      <form>
         <label for="fname">User name:</label>
         <input type="text" id="uname" name="uname" autofocus><br><br>
         <label for="fullname">Full name:</label>
         <input type="text" id="lname" name="lname"><br><br>
         <input type="submit">
      </form>
   </body>
</html>

输出

当脚本执行时,它将生成一个输出,其中包含一个允许用户输入文本的输入字段,并且 username inputtype 提到的是 autofocus,这意味着页面加载时输入字段将获得焦点。

示例

考虑另一个使用 HTML autofocus 属性用于按钮的例子。

<!DOCTYPE html>
<html>
   <body>
      <h1>The button autofocus attribute</h1>
      <button type="button" autofocus onclick="alert('Welcome To TP')">CLICK</button>
   </body>
</html>

输出

运行上述脚本后,将弹出输出窗口并显示带有 autofocus 属性的单击按钮,这使得页面加载时按钮获得焦点。当用户单击按钮时,事件被触发并显示一个警报。

示例

在下面,我们使用 datetime-local 作为 inputtype。

<!DOCTYPE html>
<html>
   <body>
      <h1>The textarea autofocus attribute</h1>
      <textarea rows="3" cols="40" autofocus>
         Mahendra Singh Dhoni is an Indian former international cricketer
         who was captain of the Indian national cricket team in limited-overs
         formats from 2007 to 2017 and in Test cricket from 2008 to 2014.
      </textarea>
   </body> 
</html>

输出

当脚本执行时,它将生成一个输出,其中包含一个带有文本的 textarea 字段,autofocus 使得页面加载时 textarea 字段获得焦点。

更新于:2023年10月11日

165 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.