有办法清除表单输入并保持输入状态。可以通过以下方式实现:
<!DOCTYPE html>
<html>
<head>
<script>
function clearForm() {
document.getElementById("myForm").reset();
localStorage.removeItem("formInput");
}
function saveInput() {
var input = document.getElementById("myInput").value;
localStorage.setItem("formInput", input);
}
window.onload = function() {
var savedInput = localStorage.getItem("formInput");
if (savedInput) {
document.getElementById("myInput").value = savedInput;
}
};
</script>
</head>
<body>
<form id="myForm">
<input type="text" id="myInput" oninput="saveInput()" />
<button type="button" onclick="clearForm()">Clear</button>
</form>
</body>
</html>
在上述代码中,使用localStorage
来保存输入内容,saveInput()
函数在输入框内容发生变化时被调用,将输入内容保存到localStorage
中。在页面加载时,通过window.onload
事件处理函数,检查是否有保存的输入内容,并将其填充到输入框中。清除按钮调用clearForm()
函数来重置表单并清除保存的输入内容。
import React, { useState } from "react";
function MyForm() {
const [inputValue, setInputValue] = useState("");
const clearForm = () => {
setInputValue("");
};
const saveInput = (event) => {
setInputValue(event.target.value);
};
return (
<form>
<input type="text" value={inputValue} onChange={saveInput} />
<button type="button" onClick={clearForm}>Clear</button>
</form>
);
}
export default MyForm;
在上述代码中,使用React的useState
钩子来创建一个状态变量inputValue
,用于保存输入内容。clearForm()
函数将inputValue
重置为空字符串,从而清除输入内容。saveInput()
函数在输入框内容发生变化时被调用,将输入内容更新到inputValue
中。通过value
属性将inputValue
绑定到输入框,以保持输入状态。清除按钮通过onClick
事件处理函数调用clearForm()
函数来清除输入内容。
以上是两种常见的方法来清除表单输入并保持输入状态。具体使用哪种方法取决于你所使用的技术栈和框架。
领取专属 10元无门槛券
手把手带您无忧上云