Safari 输入框无效问题及解决方法

同事碰到了一个 BUG，Safari 的 change 事件无法触发

问题

项目比较老，用的 JQ，我这儿复现一下当时的代码。

代码可能不对，大概看一下就行。

var $input = $('<input type="file" id="test"></input>');
$input.on('change', function (e) {
  alert('change');
});
$input.click();

解决问题

然后我面向谷歌编程，这个坑有个大佬踩过 - javascript file input onchange not working [ios safari only]

I’ll be damned: on iOS safari two extra conditions are necessary compared to other browsers:

1. The input must be actually appended to the DOM.
2. setting .onchange won’t work: addEventListener must be used instead.

意思就是：

• 第一是你需要将这个输入框挂载到 DOM 上，用 js 创建但是没有挂载到 dom 上是不行的。
• 第二是 JQ 的 onchange 是不管用的，你必须用 addEventListener

然后我就加了两行代码进行测试

$(document.body).appended($input);
$input.addEventListener('change', function () {
  alert('change test');
});

结果没动静。。这会儿连文件都选择不了了，我打印了一下 $input，发现这个对象下面没有 addEventListener，至于为啥没有先不追究是 JQ 的问题还是我太菜的问题。

再稍作改动

document.getElementById('test').addEventListener('change', function () {
  alert('change test');
});

这次可以正常弹出来了。

后记

基础太差了，竟然对 JQ 了解这么少？