<input type="file">を装飾する時の注意

どうもfujiharaです。ここ最近の台風ラッシュには困りました。 通勤電車が見合わせてまったく動かない経験を久々にしました。

本日は<input type="file">の装飾を行っていきます。
方法は実在する<input type="file"> を見えないようにして、 装飾可能な a要素がクリックされたタイミングで見えない input要素を クリックしてあげます。

失敗例

$('input:file').css({　　　　　　　//元々のファイルフォームを隠す。
  'opacity':0,
  'display':'none'
});
$('a').on('click', function(e) {　 //装飾用のリンクをクリックしたタイミング
  $('input:file').click();         //ファイルフォームをクリック
  e.preventDefault();
});

実はこのままだとAndroid では動きません。前半部分のスクリプトを 以下のように修正しました。

$('input:file').css({　　　　　　　//元々のファイルフォームを隠す。
  position:'absolute',
  top:'-200px'
});

Andoroidの場合<input type="file"> を隠した場合それをjsでクリックさせることが 出来なかったのです。なので見えなくする方法として要素を見えない場所に飛ばしてあげて 実現させました。 Android 手ごわいです。

参考