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 次浏览

开启你的 职业生涯

完成课程认证

开始
广告