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

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

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

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

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

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

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

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

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

buttonのスタイルを確認

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