by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11003 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、深入了解form的reset行为

form元素自带一个reset方法，执行后，可以让当前表单元素控件的值还原为初始设置的值。

这是一个非常有用的特性。

例如，我们表单数据请求成功后，就可以执行此方法。

form.reset()

注意，reset行为不是让输入框的值变成空，而是变成匹配:default伪类的初始值。

例如，有如下的表单元素：

<form>
  <input value="author:zhangxinxu">
  <button type="reset">重置</button>
</form>

当我们修改输入框的值，再去点击“重置”按钮，输入框的值依然是"author:zhangxinxu"而非空字符串。

如下GIF录屏所示。

无法触发change行为

reset虽然好用，但并不完美。

在真实的表单应用场景中，我们会有很多行为是跟着输入框的值走的。

例如，验证行为，一些参数的计算等。

此时，我们往往会使用change事件（或input事件）来进行处理，举个例子，商品总额根据数量进行计算：

<form>
  单价：¥68
  <p>数量：<input type="number" value="1"> 件</p>
  <p>总价：<output>68</output>元</p>
  <button type="reset">重置</button>
</form>

JS代码则是：

const input = document.querySelector('[type="number"]');
const output = document.querySelector('output');

input.onchange = function () {
  output.textContent = 68 * this.value;
};

看起来天衣无缝，数值变化，总结也跟着变化。

可当我们点击reset重置按钮后，数量还原成了初始的1，但是计算的总结却没有变化，因为change事件没有触发。

效果如下GIF录屏所示：

上图效果我还做了专门的演示页面，您可以狠狠地点击这里：form reset后change事件未触demo

那有没有什么办法可以解决这个问题呢？

二、如何触发change事件？实例

按照正常的逻辑，我们可以在reset方法执行之后，才手动触发输入框元素的change行为。

例如：

input.onchange = function () {
  output.textContent = 68 * this.value;
};

form.onreset = function () {
  input.onchange();
};

然而，上面的处理方法是无效的。

是因为方法没执行吗？不是没执行。

而是触发change事件的时机不对。

reset的触发与值的变化

在reset重置行为触发的时候，表单里面所有控件的值都是不变的，也就是：

先 reset → 再 value 变化

所以，要想让代码符合预期的执行，我们可以加个小小的定时器，例如：

input.onchange = function () {
  output.textContent = 68 * this.value;
};

form.onreset = function () {
  setTimeout(() => {
    input.onchange();
  }, 1);
};

此时，就可以看到reset之后，计算数值跟着一起变了。

//zxx: 实际开发不会使用onxxx这种事件绑定方法的，这里仅是示意

然而，一个表单中可能有很多的输入元素，总不可能每次reset执行，都去找到一个一个的输入框，再去进行change事件的触发吧。

那就太低效了，有没有什么办法，直接引入一段代码，什么也不管，只有输入框的值因为reset行为变化了，我就自动触发change事件呢？

有，这就是本文想要展示的JS微码片段。

reset触发change事件的补丁

话不多说，直接看代码，兼容IE浏览器。

<script>
// 观察页面所有的form元素，绑定reset事件
document.addEventListener('reset', function(event) {
    // 事件对象e中的target属性，指向触发事件的元素
    var target = event.target;
    // 如果触发事件的元素是form元素
    if (target.tagName.toLowerCase() === 'form') {
        // 遍历form元素中的所有input元素
        var inputs = [].slice.call(target.elements);
        // 只有当前后值变化的时候才会触发 change 事件
        inputs.forEach(function (input) {
            input.tempValue = input.value;
        });

        setTimeout(function () {
            inputs.forEach(function (input) {
                if (input.tempValue !== input.value) {
                    input.dispatchEvent(new Event('change'));
                }
            });
        }, 1);
    }
}, false);
</script>

只要把上述代码放在页面的任意位置，那么，你只要和平常开发一样，该重置的时候重置，该提交的时候提交，功能依旧正常。

比方说这个页面，也就是上面那个有问题的页面加入这段代码后的演示。

您可以狠狠地点击这里：form reset后change事件自动触发demo

此时的交互效果如下GIF示意：

是不是很棒~

三、over结束，其他叨叨叨

OK，以上就是本文主要内容了，接下来是絮絮叨叨时间了。

我前年在起点写了本书，扑街很严重。

最近又有了些新的感悟，主要是因为看了《我家娘子，不对劲》这本书。

这书是公司内容推荐的，我也抽时间断断续续看了下，令我震惊的是，居然是个以日常描写为主的作品。

这对我触动很多，我的那本书，一开始也是很细节，很日常，但是由于看的人不对，所以产生了自我怀疑，觉得可能写得啰嗦，就重新一章一章修改，删减了很多内容，现在想想，真是愚不可及。

还有，总是刻意往装逼打脸的套路上靠，这也是错误的做法，《我家娘子，不对劲》其中也有类似的桥段，评论里都吐槽不想看，赶快跳过，因为看太多，早就看吐了。

最后，要学会无视评论区的写作建议，如果我是《我家娘子，不对劲》的作者，看到下面读者的评论，我十有八九就会被带偏。

所以，归根结底，还是要坚持本心，找到自己擅长的地方，不断强化与放大，以及，不要有过高的预期，放平心态，找到和自己精神世界更振的那批读者，而不是让所有人都喜欢自己的作品，后者几乎不可能。

其实，无论是生活，做人，甚至职场似乎也是这个道理。

一点有感而发，见笑了，咱还是关注技术吧。

如果对表单reset行为还有其他的认知和见解，欢迎评论区分享。

记得转发哦~

😘😘😘

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11003

（本篇完）