レスポンシブデザインの複数formのsubmit切り分け

Question

bootstrapで作成された
レスポンシブデザインのサイトがあり
ページ内に2つのformがあります

ひとつは①スマホ用表示

もうひとつは②PC用表示です

②hidden-xs
①visible-xs
でそれぞれ表示を切り替えてます

気持ち的にはフォームは一つ(スマホ時1つ、PC時1つ)のつもりですが
どうしても記述が2つあるのでエンターでのsubmitが出来ず困ってます。
何か方法あるのでしょうか

ちなみに
最初にスマホ用①が記述され

<form role="search" action="hoge.php" method="get">
 <div class="input-group">
   <input type="text" id="keywords" class="form-control" name="keywords" placeholder="">
   <div class="input-group-btn">
    <button class="btn btn-default" id="leftSearch" onclick="return onSearch()" type="submit">検索</button>
   </div>
 </div>
</form>

あとでPC用②が記述されてます

<form action="hoge.php" method="get">
   <input type="text" id="keywords" name="keywords" placeholder="">
  <input type="submit" id="leftSearch" value="検索" class="btn btn-primary btn-sm" onclick="return onSearch()" />
</form>

②を表示している時にエンターでsubmitしたいです

Answer 1

<input type="submit" id="leftSearch" value="検索" class="btn btn-primary btn-sm" onkeypress="return onSearch(event.keyCode);" onclick="return onSearch()" />

「onkeypress」でキーの検出ができます。

onSerachに引数設定してあげたのち、
内部で引数の数値が「13」または「null(undefined)?」の場合実行してあげればよいと思います。
(13はEnterのkeyCode)

多分この方法だとバグってるでしょう(keycodeは網羅できてないきがする。)
やり方はお任せしますが、onSearchではなく別の関数を作成してその関数でonSearchを呼ぶとか、
色々方法はあると思います。

私だったらjavascript側でイベントハンドラを定義して制御してあげます。

Comments

[hyksm]

試してみます！ありがとうございます