iOS-Safariで<input type="file">のChangeイベントを拾うときの注意

ブラウザのデフォルトの<input type="file">の見た目が嫌なのでdisplay:noneで隠して、ボタンのイベントで<input type="file">をclickさせる処理をJavaScriptで書く、という事をやりたくなります。

この時、DOMを用意するのも面倒だしJavaScript側で<input type="file">をdocument.createElementを使って作ればよいのでは、と試したところ、iOSで動きませんでした。

デモ

以下は動きますがwindow._tempの行をコメントアウトするとiOS Safariでは動きません。

要点

Macを持ってないので振る舞いを見た感じの調査ですが、iOS Safari(Safari 604.1)においては、createElement→ファイル選択が終わる(changeイベントが起きる)までに作成したHTMLElement(リソース)が使われてないと判断されているようで、そのため、回収されてしまいイベントが発火しなくなるようです。

上記の例ではグローバルオブジェクトなwindowを使って参照を残すようにしています。
また、DOM上にあっても良いので、例えばdocument.body.appendChildをしてもよいです。

些細な問題ですが、ファイル選択をキャンセルした時のイベントがないようです。
なので、document.body.appendChildの場合、消すタイミングを考えたくなるはずですが、消すことが出来ない場合があります。ただファイル選択は頻繁に使われるものでもないはずなのでリソースリークしても、たかが知れているはず。。

その他

iOS版のChrome

iOS版のChromeではchangeイベントを仕込んでchangeイベントが発火するとフリーズ（？）する現象が起きています。
私の手元だけだといいんですが。。。