autofocus HTML5 屬性的使用
HTML5 帶來了巨大的進步。現在,基本的 HTML 可以執行以前由 JavaScript 和 Flash 處理的任務,例如基本的表單驗證、INPUT 佔位符以及音訊/影片。HTML 中的 autofocus 屬性允許我們在頁面載入時自動將焦點設定到元件上,這是一個非常簡單的功能。
當存在 autofocus 屬性時,頁面載入時,INPUT、TEXTAREA 或 BUTTON 元素將被選中。此屬性在主要目的是資訊收集的頁面上特別有用。
Autofocus HTML5 屬性
根據 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 欄位獲得焦點。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP