首页用JS实现重置清空文本框内容

用JS实现重置清空文本框内容

时间: 2024-03-14 20:46:27 浏览: 178

可以使用JavaScript的`reset()`方法来清空一个表单中的所有输入字段。这个方法会将所有输入字段的值重置为它们的默认值。下面是一个简单的例子，当用户单击“Reset”按钮时，所有输入字段的内容将被清空： ```html <!DOCTYPE html> <html> <head> <title>Reset Example</title> </head> <body> <h1>Reset Example</h1> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="button" value="Reset" onclick="resetForm()"> </form> <script> function resetForm() { document.querySelector('form').reset(); } </script> </body> </html> ``` 在上面的代码中，我们使用了`querySelector()`方法来获取表单元素，并将其传递给`reset()`方法，以清空所有输入字段的内容。当用户单击“Reset”按钮时，`resetForm()`函数将被调用，从而清空表单中的所有输入字段。需要注意的是，`reset()`方法只会重置输入字段的值，而不会重置其它属性，如`disabled`、`readonly`等。如果您需要重置这些属性，可以使用JavaScript代码显式地将它们设置为它们的默认值。

阅读全文