input的onchange事件第二次不执行的解决办法

原创于 2019-06-14 11:58:37 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

原生JavaScript 专栏收录该内容

59 篇文章

订阅专栏

本文探讨了input元素onchange事件在第二次选择相同文件时不触发的问题，并提供了解决方案。核心在于事件触发条件为输入值发生变化，因此，通过清空input的value值确保每次选择都会被视为一种改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input的onchange事件第二次不执行，问题的根源在于没有发生任何改变，因为绑定的是onchange事件，如果事件的对象没有发生改变，那么事件是不会执行的。当第二次选择文件和第一次选择的文件相同的时候，input的value值是一样的，在js看来就是没有变化，里面的值跟之前还是一样。所以就出现了问题的出现。

要解决这个问题，可以在onchange事件执行完之后，清空input的value值，当第二次再选择相同的文件时，里面的value从空值变为任何值，都是一个改变的过程，所以就不会存在事件不执行的问题了。

代码示例：

let inFile = document.getElementById("inFile");
inFile.onchange = function(e) {

    // 先执行事件的代码块，然后将对象本身的value值清空
    inFile.value = "";    // 写法1

    e.target.value = "";    // 写法2

}