Help us understand the problem. What is going on with this article?

iOSのsafariでinput[type="file"]を見た目をいい感じにしたかった

Nuxt.jsで組んでいたアプリをiOS端末でデバッグしてみたらいい感じに動かなかったので、いろいろ探ってみて分かったことをメモ。

問題の起きたコード

とりあえずinputを非表示(display: none)にして、inputの代わりのボタンをクリックしたときに、非表示のinput要素をクリックするイベントを発火させるやつ。


See the Pen
image select(included bug)
by keyakko (@keyakko)
on CodePen.

PCでは動く。
safariではいい感じに動かない。

よくわからない動き

問題のコードでも、画像選択の画面は出てくるんですよね。
ただ、選択後にonchangeのイベントが発火されない。(alertがでない)

試しにinput要素を表示して、inputの要素をクリックしたら当たり前のようにイベントは発火されてalertは出る。
JS経由でクリックさせて、ファイル選択させてもイベント発火されないのはなんで...?

対処

とりあえず今回の対処。

1. buttonとinputの要素の順番を変える

codepenにコード書いててたまたま気づいた。完全に知識不足。


See the Pen
image select(fix pattern1)
by keyakko (@keyakko)
on CodePen.

<label>
  <button>アップロード</button>
  <input type="file" />
</label>

2. ボタンの上に透明にしたinput要素を乗せる

Buefyのソースが参考に。


See the Pen
image select(fix pattern2)
by keyakko (@keyakko)
on CodePen.

さいごに

いろいろ探すと、display:noneはちゃんと動かないからwidth:0; height:0; overflow:hidden;で対応しようねって出たりするけど、それではいい感じにならなかった。
最終的には対処方法の2番に行き着いた感じ。

話はそれるけど、iPhoneのsafariのコンソールが見たいのにsafariの開発タブにデバイスがすんなり表示されないの自分だけ...?
そっちでも苦しめられた...(ここを参考にWi-FiとBluetoothをオフにしたらなぜかちょっと表示されたけど)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした