定义和用法
onreset 事件在表单被重置后触发。
浏览器支持
| 事件 | 谷歌 | IE | 火狐 | 苹果 | opera |
|---|---|---|---|---|---|
| onreset | Yes | Yes | Yes | Yes | Yes |
语法
HTML 中：
<element onreset="myScript">JavaScript 中：
object.onreset=function(){myScript};JavaScript 中, 使用 addEventListener() 方法：
object.addEventListener("reset", myScript);注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
Technical Details
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | Yes |
| 事件类型: | Event |
| 支持的 HTML 标签: | <form>, <keygen> |
实例
DEMO1：当重置表单后执行 JavaScript。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
</head>
<body>
<p>当表单被重置后，触发函数并弹出提示信息。</p>
<form onreset="myFunction()">
输入您的名字: <input type="text">
<input type="reset">
</form>
<script>
function myFunction() {
alert("表单已重置");
}
</script>
</body>
</html>DEMO2：在表单重置前显示写入到文本域中的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
</head>
<body>
<p>想文本域中输入信息并点击重置按钮。</p>
<form onreset="myFunction()">
<input type="text" id="myInput">
<input type="reset">
</form>
<script>
function myFunction() {
var x = document.getElementById("myInput");
alert("重置前，文本信息为： " + x.value);
}
</script>
</body>
</html>DEMO3：使用 HTML DOM Form Object 的 reset() 方法来重置表单。当执行后， onreset 事件被触发，并会弹出提示信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
</head>
<body>
<p>在文本域中输入信息，并点击 "重置表单" 按钮来重置表单。</p>
<form id="myForm" onreset="myAlertFunction()">
名: <input type="text" name="fname">
<input type="button" onclick="myResetFunction()" value="重置表单">
</form>
<p>HTML DOM Form Object 的 reset() 方法重置了所有表单元素的值。当执行后， onreset 事件被触发，并弹出信息。</p>
<script>
// 重置id="myForm"表单的所有元素值
function myResetFunction() {
document.getElementById("myForm").reset();
}
// 在表单重置后弹出提示信息
function myAlertFunction() {
alert("表单已重置");
}
</script>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/domtips/3954.html
支付宝 
微信 