teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問iPhoneでWEBページ上で画像の長押しをトリガーに<input type="file>のダイアログを表示したい

編集履歴

質問編集履歴

3

誤字の修正

2020/06/25 04:53

投稿

Rmgh
Rmgh

スコア0

test CHANGED
File without changes
test CHANGED
@@ -156,4 +156,4 @@
156
156
 
157
157
  ```
158
158
 
159
- > ダイアログがでない
159
+ →ダイアログがでない

2

書式を改善

2020/06/25 04:53

投稿

Rmgh
Rmgh

スコア0

test CHANGED
@@ -1 +1 @@
1
- WEBページ上で画像の長押しをトリガーに<input type="file>のダイアログを表示したい
1
+ iPhoneでWEBページ上で画像の長押しをトリガーに<input type="file>のダイアログを表示したい
test CHANGED
@@ -1,48 +1,10 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- WEBページ上で画像の長押しをトリガーに<input type="file>のダイアログを表示したい。
3
+ WEBページ上で画像の長押しをトリガーに<input type="file>のダイアログを表示したいです。
4
+
5
+ 解決策やアドバイス等頂きたいです。
4
6
 
5
7
 
6
-
7
- ### 発生している問題・エラーメッセージ
8
-
9
- iPhone（Safari,Chrome共に）ダイアログの表示ができない。
10
-
11
- ※windowsPC（Chromeのデベロッパーツール）とAndroid（Chrome）では問題なく動作している。
12
-
13
-
14
-
15
- ### 試したこと
16
-
17
- 【iPhone上での動作状況】
18
-
19
- <input type="file">を普通にタップ
20
-
21
- > ダイアログの表示を確認
22
-
23
-
24
-
25
- <input type="file"> を JavascriptのClickにより呼び出し
26
-
27
- > ダイアログの表示を確認
28
-
29
-
30
-
31
- 長押し時にJavascriptのアラートを表示
32
-
33
- > アラートの表示を確認
34
-
35
-
36
-
37
- 長押し時に<input type="file">をJavascriptのClickにより呼び出し
38
-
39
- > ダイアログがでない
40
-
41
-
42
-
43
-
44
-
45
- ### 該当のソースコード
46
8
 
47
9
  ```html
48
10
 
@@ -55,36 +17,6 @@
55
17
  </body>
56
18
 
57
19
  ```
58
-
59
-
60
-
61
-
62
-
63
- ```javascript
64
-
65
- $(function(){
66
-
67
- $('#img').bind('touchend', function() {
68
-
69
- clearInterval(timer);
70
-
71
- });
72
-
73
- $("#img").bind('touchstart', function() {
74
-
75
- timer = setTimeout(function(){
76
-
77
- $("#up").trigger("click");
78
-
79
- },500);
80
-
81
- });
82
-
83
- });
84
-
85
- ```
86
-
87
-
88
20
 
89
21
  ```css
90
22
 
@@ -103,3 +35,125 @@
103
35
  }
104
36
 
105
37
  ```
38
+
39
+
40
+
41
+ ### 発生している問題・エラーメッセージ
42
+
43
+ iPhone（Safari,Chrome共に）ダイアログの表示ができない。
44
+
45
+ ※windowsPC（Chromeのデベロッパーツール）とAndroid（Chrome）では問題なく動作している。
46
+
47
+
48
+
49
+ ### iPhone上での動作状況
50
+
51
+ ###### <input type="file">を普通にタップ
52
+
53
+ →ダイアログの表示を確認
54
+
55
+
56
+
57
+
58
+
59
+ ###### <input type="file">と<img>を<label>で囲う
60
+
61
+ ```html
62
+
63
+ <body>
64
+
65
+ <label>
66
+
67
+ <img id="img" class="" src="img/1.JPG">
68
+
69
+ <input id="up" type="file" style="display:none;" />
70
+
71
+ <label>
72
+
73
+ </body>
74
+
75
+ ```
76
+
77
+ →ダイアログの表示を確認
78
+
79
+
80
+
81
+
82
+
83
+ ###### <input type="file"> を JavascriptのClickにより呼び出し
84
+
85
+ ```javascript
86
+
87
+ $(function(){
88
+
89
+ $("#img").click(function(){
90
+
91
+ $("#up").trigger("click");
92
+
93
+ });
94
+
95
+ });
96
+
97
+ ```
98
+
99
+ →ダイアログの表示を確認
100
+
101
+
102
+
103
+ ###### 長押し時にJavascriptのアラートを表示
104
+
105
+ ```javascript
106
+
107
+ $(function(){
108
+
109
+ $("img").bind('touchstart', function(){
110
+
111
+ timer1 = setTimeout(function(){
112
+
113
+ alert("a");
114
+
115
+ },1000);
116
+
117
+ })
118
+
119
+ $('#img').bind('touchend', function() {
120
+
121
+ clearTimeout(timer1);
122
+
123
+ });
124
+
125
+ });
126
+
127
+ ```
128
+
129
+ →アラートの表示を確認
130
+
131
+
132
+
133
+ ##### 長押し時に<input type="file">をJavascriptのClickにより呼び出し
134
+
135
+ ```javascript
136
+
137
+ $(function(){
138
+
139
+ $("img").bind('touchstart', function(){
140
+
141
+ timer1 = setTimeout(function(){
142
+
143
+ $("#up").trigger("click");
144
+
145
+ },1000);
146
+
147
+ })
148
+
149
+ $('#img').bind('touchend', function() {
150
+
151
+ clearTimeout(timer1);
152
+
153
+ });
154
+
155
+ });
156
+
157
+ ```
158
+
159
+ > ダイアログがでない

1

文章全体を簡潔にしました。

2020/06/25 04:52

投稿

Rmgh
Rmgh

スコア0

test CHANGED
@@ -1 +1 @@
1
- 画像を長押ししたらファイルダイアログを表示する仕組みをJSを使ってiOsで実現したい
1
+ WEBページ上で画像の長押しをトリガーに<input type="file>のダイアログを表示したい
test CHANGED
@@ -1,6 +1,44 @@
1
- WEBページ上で画像を長押ししてファイルダイアログを表示する仕組みを作りたいのですが、iPhoneだけ表示ができません。
1
+ ### 前提・実現したいこと
2
2
 
3
+ WEBページ上で画像の長押しをトリガーに<input type="file>のダイアログを表示したい。
4
+
5
+
6
+
3
- 対応するためにはどうしたらよいでしょうか。
7
+ ### 発生している問題・エラーメッセージ
8
+
9
+ iPhone（Safari,Chrome共に）ダイアログの表示ができない。
10
+
11
+ ※windowsPC（Chromeのデベロッパーツール）とAndroid（Chrome）では問題なく動作している。
12
+
13
+
14
+
15
+ ### 試したこと
16
+
17
+ 【iPhone上での動作状況】
18
+
19
+ <input type="file">を普通にタップ
20
+
21
+ > ダイアログの表示を確認
22
+
23
+
24
+
25
+ <input type="file"> を JavascriptのClickにより呼び出し
26
+
27
+ > ダイアログの表示を確認
28
+
29
+
30
+
31
+ 長押し時にJavascriptのアラートを表示
32
+
33
+ > アラートの表示を確認
34
+
35
+
36
+
37
+ 長押し時に<input type="file">をJavascriptのClickにより呼び出し
38
+
39
+ > ダイアログがでない
40
+
41
+
4
42
 
5
43
 
6
44
 
@@ -36,8 +74,6 @@
36
74
 
37
75
  timer = setTimeout(function(){
38
76
 
39
- alert("a");
40
-
41
77
  $("#up").trigger("click");
42
78
 
43
79
  },500);