環境
iPhone 11 Pro
iOS 17.1.2
発生している問題の概要
Mobile Safariでカメラロールから読み込むための<input type="file">を、
JSからclick()で発火すると、onchangeが発火しない
やりたいこと
iPhoneから画像をアップする
読み込みボタンを押すなりしたら読み込みダイアログを出して、
選んだ画像を返すようなメソッド、showOpenImageDialog()を作る
動かないソース
function showOpenImageDialog() {
return new Promise(resolve => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.addEventListener('change' , (event) => {
resolve(event.target.files[0]);
});
input.click();
});
}
やっていること
inputのDOMを作り、typeをfile、今回は画像なのでacceptにimage/*を設定。
onchangeの中にはファイルを返してresolveする処理を記述
その後click()で発火する
発生事象
input.click()で読み込みダイアログは開く
カメラロールから画像を選択は出来るが、何のエラーも出ず、
ただただonchangeの内容が発火しない。
※他のブラウザでは問題ない
動いたソース
function showOpenImageDialog() {
return new Promise(resolve => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.addEventListener('change' , (event) => {
resolve(event.target.files[0]);
});
input.click();
document.body.onfocus = () =>{
setTimeout(() =>{
if(input.value == ""){
resolve(null);
}else if(input.value == null){
resolve(null);
}else {
}
document.body.onfocus = null;
},1000);
}
});
}
なぜこれで動くか
謎です。だれか教えてください。
推測ではMobile Safari(たまにSafariでも)ではフォーカス状態のままになってしまい、
フォーカスが解除されないと、値が変化せずonchangeは発火しないのでは？と思います。
ので、1秒後とかにフォーカスを外す処理を挟むことで、値の変化が反映される？
2023/12/06 追記
changeではなくinputを使えば動くとのことでした。
フォーカスの機構を外して試してみると、動いたり動かなかったり、たまに検知漏れするようです。
changeと違って動くこともあるので、inputの方が良いかもしれませんが、、