数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学HTML DOM Input 重置按钮 disabled 属性
HTML DOM Input 重置按钮的 disabled 属性用于设置或返回重置按钮是否应禁用。它使用布尔值，true 表示重置按钮应禁用，false 表示不禁用。默认情况下，disabled 属性设置为 false。禁用的元素默认情况下显示为灰色且不可点击。
语法
以下是语法：
设置 disabled 属性：
resetObject.autofocus = true|false
这里，true = 重置按钮被禁用，false = 重置按钮未被禁用。默认情况下为 false。
示例
让我们来看一个 Input 重置按钮 disabled 属性的示例：
<!DOCTYPE html>
<html>
<body>
<h1>Input reset disabled 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">
</form>
<p>Disable the above reset button by clicking on the DISABLE button</p>
<button type="button" onclick="disableReset()">DISABLE</button>
<p id="Sample"></p>
<script>
function disableReset() {
document.getElementById("RESET1").disabled=true;
document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
}
</script>
</body>
</html>输出
这将产生以下输出：
点击“禁用”按钮后：
在上面的例子中：
我们创建了一个 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>
然后，我们创建了一个名为“禁用”的按钮，当用户点击它时，将执行 disableReset() 方法：
<button type="button" onclick="disableReset()">DISABLE</button>
disableReset() 方法使用 getElementById() 方法获取 type 为 reset 的 input 元素，并将其 disabled 属性设置为 true。这使得重置按钮不可点击，用户无法再与之交互。它现在变成了灰色：
function disableReset() {
document.getElementById("RESET1").disabled=true;
document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
}
更新于：2019年8月22日
浏览量：175
广告