Javascript 使用“取消”按钮还原表单数据

是否有一种优雅的方法可以在表单旁边插入一个取消（或恢复）按钮，该按钮可以在用户开始编辑之前恢复表单的内容

比如说,

用户拥有一个帐户，并希望更改其用户名

他们来到表单，看到输入字段填充了用户名：joeuser

他们开始编辑字段并改变主意

单击cancel/revert，该字段将恢复为username:joeuser——表单不仅仅是用空字段重置

使用太多的黑客可能吗？我想也许HTML5历史API可以在某种程度上用于此目的。

您可以使用jQuery：

---

$（“#formID”）[0]。重置（）

如果您正在使用JQuery：

$('#FormID').each(function(){
  this.reset();
});

否则，您可以使用以下选项：

document.getElementById('myForm').reset();

---

您可以使用此函数，将表单元素作为变量传递：

function resetForm(form) {
    var elems = form.elements;
    for (i = 0; i < elems.length; i++) {
        var current = elems[i],
            type = current.type.toLowerCase();
        switch (type) {
            case "select-one":
            case "select-multi":
                current.selectedIndex = -1;
                break;
            case "checkbox":
            case "radio":
                if (current.checked) {
                    current.checked = false;
                }
                break;
            case "password":
            case "textarea":
            case "text":
            case "hidden":
                current.value = "";
                break;
            default:
                break;
        }
    }
}

函数重置表单（表单）{
var elems=形式元素；
对于（i=0；i

---

这只是为了清除表单，您可以使用cookies保存用户名并通过这个简单的功能还原它。

您可以获取表单，克隆它，将克隆保留在内存中，如果用户点击取消，用克隆副本替换表单？是否看到标签

jquery

？@LightStyle OP没有指定…并且我正在添加纯JS解决方案。是否看到标签

jquery

？否。那又怎么样？这与document.forms[0].reset（）是一样的（如果有多个表单，只需更改索引）您可以使用

清除一个表单。这与将表单重置为默认值的情况不完全相同，将表单重置为“空白”值的情况也不同