親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。育児のイロハという育児サイト(https://ikujip.jp)の開発も行っているため、その開発で使用されている技術についても掲載しています。

safariでエンターによるformのイベントがうまく発火しない時の対処法

formのイベントをエンターで発火

Webサービスにおいて、入力した値を処理するためにformタグを使うことは多いでしょう。

<form>
    <input type="text">
    <button>送信</button>
</form>

基本的に上記のような構造で、buttonをクリックすることでイベントを発火させることになりますが、上記の構造の場合はinputタグにカーソルが当たっているタイミングでエンターボタンをクリックすることでイベントを発火させることができます。

buttonタグにクリックイベントなどを設定し、フォームの送信だけではなくJavascriptによる独自の処理を実行することも可能です。

他のブラウザでは上手くいくのにsafariだと上手く送れない

今回の主題でもありますが、このエンターによるフォームの送信に関してsafariでは上手く発火されないことがあります。
chromeFirefoxでは上手くいくんですが。。。
スマホを使っていてもchromeがデフォルトのAndroidでは動作するのにsafariがデフォルトのiOSでは動作しないということもありえます。

ちなみにこの場合、clickイベントではなく、formにactionを指定してPOSTさせようとする場合は上手くいくことが多いです。
でもやりたいことはPOSTさせることではないですよね。

buttonのスタイルを確認

結論としては、buttonタグに何かスタイルが当たっていないか確認してみてください。
例えばボタンを明示的に表示していない場合、「display:none」などを設定していませんか?
そのようなスタイルを当ててしまうと、chromeでは問題ないですがsafariでは上手くいかないようです。

LOGICOOL ワイヤレストラックボール SW-M570

LOGICOOL ワイヤレストラックボール SW-M570