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では上手くいかないようです。
ロジクール ワイヤレスマウス トラックボール 無線 SW-M570 Unifying 5ボタン トラックボールマウス 電池寿命最大18ケ月 国内正規品 1年間無償保証
- 発売日: 2018/06/21
- メディア: Personal Computers
Beexcellent ゲーミングヘッドセット PS4ヘッドセット 高音質 マイク付 3.5mm 軽量 耐久 伸縮可能 (ブルー)
- メディア: Personal Computers