フォームボタンもbootstrapのUIにしたら、operaで動かなくなった

フォームのボタンをbootstrapのUIにしたい

form_forでフォームを生成するとファイル選択ボダンが普通のボタンになってしまい、せっかくbootstrapを使っているのに残念でなりません。

ググってみると同じ事を思っている方は沢山いらっしゃるようで、先人の智恵を借り、下記のようにbootstrap UIのダミーボタンを使うことにより解決できました。

<!-- bootstrap UIのダミーボダン。onclickイベントで、フォーム(#photo_photo_image)をクリック -->
<div class="upload-button"><a class="btn btn-default" onclick="$('#photo_photo_image').click()">ファイルの選択</a></div>

<!-- ファイルアップロードフォーム。display:"none"で非表示に -->
<%= form_for(@photo, :html=>{:multipart=>true}) do |f| %>
  <div class="field">
    <%= f.file_field :photo_image, style:"display: none" %>
  </div>
<% end %>

これで、Chrome / Firefox / IE は問題なく動作したのですが、なぜかOperaではうんともすんともいいません。

Operaで動かす

がんばってググると、完全に同じ問題がstackoverflowでやり取りされていました。

Operaで動かすには、下記2点がポイントになるようです。

1. "display: none"のかわりに、"visibility: hidden" を使う
2. htmlのonclick属性ではなく、全部jqueryでやる

これでOperaでも動くようになりました。
ソースはこんな感じです。

<!-- ダミーボタンクリックでフォームボタンをトリガーするJQuery -->
<script type="text/javascript">
$('#dummy-btn').on('click', function() {
  $('#photo_photo_image').click()
});
</script>

<!-- ダミーボタン JQueryからトリガーするために id="dummy-btn"を追加 -->
<div class="upload-button"><a class="btn btn-default" id="dummy-btn">ファイルの選択</a></div>

<!-- "visibility: hidden"で見えなくしたフォーム -->
<%= form_for(@photo, :html=>{:multipart=>true}) do |f| %>
  <div class="field">
    <%= f.file_field :photo_image, style:"visibility:hidden" %>
  </div>
<% end %>

"visibility: hidden"だと、input要素の大きさがそのまま余白となってしまうので、CSSで適当につぶしておきました。