前提・実現したいこと
WEBページ上で画像の長押しをトリガーに<input type="file>のダイアログを表示したいです。
解決策やアドバイス等頂きたいです。
html
1<body> 2<img id="img" class="" src="img/1.JPG"> 3<input id="up" type="file" style="display:none;" /> 4</body>
css
1body { 2 -webkit-touch-callout:none; 3 -webkit-user-select: none; 4 -moz-user-select: none; 5 -o-user-select: none; 6 user-select: none; 7 }
発生している問題・エラーメッセージ
iPhone(Safari,Chrome共に)ダイアログの表示ができない。
※windowsPC(Chromeのデベロッパーツール)とAndroid(Chrome)では問題なく動作している。
iPhone上での動作状況
<input type="file">を普通にタップ
→ダイアログの表示を確認
<input type="file">と<img>を<label>で囲う
html
1<body> 2 <label> 3 <img id="img" class="" src="img/1.JPG"> 4 <input id="up" type="file" style="display:none;" /> 5 <label> 6</body>
→ダイアログの表示を確認
<input type="file"> を JavascriptのClickにより呼び出し
javascript
1$(function(){ 2 $("#img").click(function(){ 3 $("#up").trigger("click"); 4 }); 5 });
→ダイアログの表示を確認
長押し時にJavascriptのアラートを表示
javascript
1$(function(){ 2 $("img").bind('touchstart', function(){ 3 timer1 = setTimeout(function(){ 4 alert("a"); 5 },1000); 6 }) 7 $('#img').bind('touchend', function() { 8 clearTimeout(timer1); 9 }); 10 });
→アラートの表示を確認
長押し時に<input type="file">をJavascriptのClickにより呼び出し
javascript
1$(function(){ 2 $("img").bind('touchstart', function(){ 3 timer1 = setTimeout(function(){ 4 $("#up").trigger("click"); 5 },1000); 6 }) 7 $('#img').bind('touchend', function() { 8 clearTimeout(timer1); 9 }); 10 });
→ダイアログがでない
あなたの回答
tips
プレビュー