html点击按钮清空文本框
时间: 2023-06-30 20:05:25 浏览: 165
你可以使用以下代码实现:
```html
<input type="text" id="myInput">
<button onclick="document.getElementById('myInput').value = ''">清空</button>
```
当按钮被点击时,使用 JavaScript 获取文本框的值并将其设置为空字符串即可。
相关问题
html同时清空多个文本框
可以使用 JavaScript 来清空多个文本框,可以通过 `document.getElementById` 获取文本框元素,然后使用 `value` 属性来清空文本框的内容。以下是一个示例代码:
```html
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
<button onclick="clearInputs()">清空文本框</button>
<script>
function clearInputs() {
document.getElementById("input1").value = "";
document.getElementById("input2").value = "";
document.getElementById("input3").value = "";
}
</script>
```
在上面的代码中,我们定义了三个文本框,分别具有不同的 ID。然后,我们定义了一个 `clearInputs()` 函数,在该函数中,我们使用 `document.getElementById` 方法获取每个文本框元素,然后将其值设置为空字符串 `""`。最后,在 HTML 中,我们定义了一个按钮,当用户单击该按钮时,将调用 `clearInputs()` 函数来清空所有文本框。
用JS实现重置清空文本框内容
可以使用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代码显式地将它们设置为它们的默认值。