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

【问题标题】：Restore textfield's default value when user clicks the reset button JavaScript当用户单击重置按钮 JavaScript 时恢复文本字段的默认值
【发布时间】：2013-05-26 23:19:11
【问题描述】：

当用户单击“重置”按钮时，我正在尝试让文本字段恢复为默认值。

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

如何使用纯 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>

JAVASCRIPT：

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 = '';

    }

【问题讨论】：

<button type="reset">Reset</button>

标签： javascript html

【解决方案1】：

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

【讨论】：

【解决方案2】：

innerText是IE浏览器中实现的invalid属性，用于设置/获取非表单元素的文本内容，如果要设置为默认值，可以使用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();

【讨论】：

【解决方案3】：

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

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

function buttonResetHandler(e) {
    initializeInputs();
}

【讨论】：

document.getElementById("first").innerText 给出错误。我认为那不是他所要求的。
以上只是将用户的输入替换为其他内容。我想要的是删除用户的输入并恢复默认值（第一个数字/第二个数字）。

【解决方案4】：

替换，

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";'>

【讨论】：

将事件添加到按钮。