HTML DOM 輸入範圍自動對焦屬性


HTML DOM 輸入範圍自動對焦屬性與 HTML <input> 元素的自動對焦屬性相關聯。此屬性用於設定或返回頁面載入時輸入範圍滑塊是否應該自動獲取焦點。

語法

以下是語法 −

設定自動對焦屬性 −

rangeObject.autofocus = true|false

此處,true 表示範圍滑塊應獲取焦點,false 表示相反。預設情況下,它設定為 false。

示例

我們來看一個輸入範圍自動對焦屬性的示例 −

 動態演示

<!DOCTYPE html>
<html>
<body>
<h1>Input range autofocus property</h1>
<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>
<br>
<button type=”button” onclick="rangeFocus()">CHECK</button>
<p id="Sample"></p>
<script>
   function rangeFocus() {
      var R = document.getElementById("RANGE1").autofocus;
      document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
   }
</script>
</body>
</html>

輸出

這將生成以下輸出 −

單擊 CHECK 按鈕 −

在上例中 −

我們建立了一個包含 type =“range”、id=“RANGE1”、name=“VOL” 的表單中的輸入欄位,它啟用了自動對焦屬性,即設定為 true。

<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>

然後我們建立了一個 CHECK 按鈕,使用者在被單擊後將執行 rangeFocus() 方法 −

<button type=”button” onclick="rangeFocus()">CHECK</button>

rangeFocus() 方法使用 getElementById() 方法獲取型別為範圍的 input 元素並獲取 autofocus 屬性。autofocus 屬性根據範圍滑塊自動對焦屬性值返回 true 和 false。這個值被分配給變數 R,並使用其 innerHTML 屬性顯示在 id 為“Sample”的段落中 −

function rangeFocus() {
   var R = document.getElementById("RANGE1").autofocus;
   document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
}

更新於: 22-Aug-2019

94 次瀏覽

開啟你的 職業生涯

完成課程認證

開始
廣告