当用户点击重置按钮时，恢复textfield的默认值

Restore textfield's default value when user clicks the reset button JavaScript

本文关键字：恢复 textfield 默认值 按钮 用户      更新时间：2023-09-26

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

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

"

如何使用纯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 = '';
    }

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

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

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

document.forms["myForm"].reset();
  1. location.reload ();//重新加载页面
  2. history.go (0);//删除历史记录
  3. 但是如果你需要在页面中保留一些值，那么在函数中重新分配值。要重新赋值，在function中再次写入变量(在let中声明以稍后更改)，并再次更改textContent。

替换，

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

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

function initializeInputs() {
    document.getElementById("first").value = '';
    document.getElementById("second").value= '';
}
function buttonResetHandler(e) {
    initializeInputs();
}
相关文章：