数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML DOM Input 重置 autofocus 属性
HTML DOM Input 重置 autofocus 属性与 HTML <input> 元素的 autofocus 属性相关。此属性用于设置或返回页面加载时是否应自动聚焦重置按钮。
语法
以下是语法：
设置 autofocus 属性：
resetObject.autofocus = true|false
这里，true 表示重置按钮应该获得焦点，false 表示反之。默认情况下设置为 false。
示例
让我们来看一个 Input 重置 autofocus 属性的示例：
<!DOCTYPE html>
<html>
<body>
<h1> Reset Autofocus property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1" autofocus>
</form>
<p>Get the reset button autofocus property value by clicking the below button</p>
<button type="button()" onclick="FocusVal()">CHECK</button>
<p id="Sample"></p>
<script>
function FocusVal(){
var f = document.getElementById("RESET1").autofocus;
document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
}
</script>
</body>
</html>输出
这将产生以下输出：
点击“CHECK”按钮：
在上面的例子中：
我们创建了一个 type=”reset”，id=”RESET1” 的 <input> 元素。点击此按钮将重置表单数据。此按钮位于包含两个文本字段的表单内，表单也应用了内联样式：
<form style="border:solid 2px green;padding:2px"> UserName: <input type="text" id="USR"> <br> Location: <input type="text" id="Age"> <br><br> <input type="reset" id="RESET1"> </form>
然后我们创建了一个“CHECK”按钮，点击此按钮将执行 FocusVal() 方法：
<button type="button()" onclick="FocusVal()">CHECK</button>
FocusVal() 方法使用 getElementById() 方法获取 type 为 reset 的 input 元素，并获取 autofocus 属性。autofocus 属性根据重置按钮 autofocus 属性的值返回 true 或 false。此值被赋给变量 f，并使用其 innerHTML 属性显示在 id 为“Sample” 的段落中：
function FocusVal(){
var f = document.getElementById("RESET1").autofocus;
document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
}
更新于：2019年8月22日
160 次浏览
广告