資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會研究
時尚研究
法律研究HTML DOM 輸入搜尋的 autofocus 屬性
HTML DOM 輸入搜尋的 autofocus 屬性與 HTML <input> 元素的 autofocus 屬性相關聯。此屬性用於設定或控制頁面載入時是否自動聚焦輸入搜尋框。
語法
以下為其語法 −
設定 autofocus 屬性 −
searchObject.autofocus = true|false
其中，true 表示搜尋框獲取焦點，false 表示不獲取焦點。預設情況下設定為 false。
示例
我們來看一個輸入搜尋 autofocus 屬性的示例 −
<!DOCTYPE html>
<html>
<body>
<h1>Input search autofocus property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>
<p>Get the autofocus attribute value for the above search field by clicking the below
button.</p>
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
function FocusVal() {
var R = document.getElementById("SEARCH1").autofocus;
document.getElementById("Sample").innerHTML = "The search field has autofocus property
set to "+R;
}
</script>
</body>
</html>輸出
這將產生以下輸出 −
點選 CHECK FOCUS 按鈕後 −
在上面的示例中 −
我們首先建立一個 type=”search”、id=”SEARCH1”、name=”fruits” 的 <input> 元素，並將其 autofocus 屬性設定為 true。搜尋框位於一個表單中 −
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus> </form>
然後我們建立一個名為 CHECK FOCUS 的按鈕，使用者點選時它將會執行 FocusVal() 方法 −
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
FocusVal() 方法使用 getElementById() 方法獲取帶有 type search 的輸入元素，並獲取其 autofocus 屬性。autofocus 屬性會根據搜尋框 autofocus 屬性的值返回 true 或 false。此值被賦值給變數 f，並使用 innerHTML 屬性顯示在 id 為“Sample”的段落中 −
function FocusVal(){
var f = document.getElementById("SEARCH1").autofocus;
document.getElementById("Sample").innerHTML = "The search field autofocus property is set to: "+f;
}
更新於： 19-Aug-2019
94 次瀏覽
廣告