当用户单击重置按钮 JavaScript 时恢复文本字段的默认值

Question

当用户单击“重置”按钮时，我试图让文本字段返回到它们的默认值。

现在，当用户单击“重置”按钮时，它所做的就是将用户的文本替换为“”。

我如何使用纯 JavaScript（没有 jQuery）来做到这一点？

HTML：

<p>Type the first number</p>
<input id="first" type="text" placeholder="First Number" />
<p>Type the second number</p>
<input id="second" type="text" placeholder="Second Number" />
<button id="aButton">Apply</button>
<button id="rButton">Reset</button>
<div id="add"></div>

爪哇脚本：

app.onactivated = function (args) {
        var aButton = document.getElementById("aButton");
        aButton.addEventListener("click", buttonClickHandler, false);

        var rButton = document.getElementById("rButton");
        rButton.addEventListener("click", buttonResetHandler, false);

    };

...

function buttonResetHandler(evetInfo) {

        document.getElementById("first").innerText = '';
        document.getElementById("second").innerText = '';

    }

Answer 1

innerText是IE浏览器中实现的无效属性，用于设置/获取非表单元素的文本内容，如果要设置为默认值，可以使用defaultValue属性：

var a = document.getElementById("first"),
    b = document.getElementById("second");
a.value = a.defaultValue;
b.value = b.defaultValue;

如果要重置所有表单元素，可以使用 DOM HTMLFormElement对象的.reset()方法：

document.forms["myForm"].reset();

Answer 2

1. location.reload(); // 重新加载页面
2. 历史.go(0); // 删除历史
3. 但是，如果您需要保留页面内的某些值，则再次重新分配函数中的值。 要重新分配，请在function再次写入变量（在let声明以便稍后更改）并再次更改textContent 。

Answer 3

代替，

document.getElementById("first").innerText

和，

document.getElementById("first").value

例子：

<input id="txtBox" type="text" value="lama">
<input type="button" value="reset lama" onclick='document.getElementById("txtBox").value="lama2";'>

Answer 4

创建一个为每个输入设置默认值的 init 函数，然后你可以调用它：

function initializeInputs() {
    document.getElementById("first").value = '';
    document.getElementById("second").value= '';
}

function buttonResetHandler(e) {
    initializeInputs();
}