Seam/JSF フォーム送信起動ボタン onclick イベント

Question

クエリビルダーを備えた検索フォームがあります。ビルダーはボタンによってアクティブ化されます。このようなもの

<h:form id="search_form">
  <h:outputLabel for="expression" value="Expression"/>
  <h:inputText id="expression" required="true" value="#{searcher.expression}"/>
  <button onclick="openBuilder(); return false;">Open Builder</button>
  <h:commandButton value="Search" action="#{searcher.search}"/>
</h:form>

結果は、次の両方を備えた HTML になります。 <button/> と <input type="submit"/> 形で。ユーザーが送信ボタンをクリックするのではなく、式フィールドに文字列を入力して Enter キーを押すと、検索が送信されることが予期される動作でクエリ ビルダーが表示されます。何が与えますか？

Answer 1

HTML フォームのボタンは、フォームの送信に使用されるものと想定されています。ボタンを input type="button" に変更すると修正されるはずです。

あるいは、type="button" を button 要素に追加します。

Answer 2

まずは検索ボタンにIDを付与します。次に、テキストボックスでクライアントイベントをインターセプトできます オンキーダウン, 、次のような (JavaScript) 関数を使用します。

  function KeyDownHandler(event)
    {
        // process only the Enter key
        if (event.keyCode == 13)
        {
            // cancel the default submit
            event.returnValue=false;
            event.cancel = true;
            // submit the form by programmatically clicking the specified button
            document.getElementById('searchButtonId').click();
        }
    }

お役に立てれば幸いです。

Answer 3

入力フィールドが 1 つの場合 フォーム内では、多くのブラウザーは Enter キーを押すと自動的にフォームを送信します。

試す

1. 別の入力フィールドを追加します。見えないようにスタイルを設定して非表示にします。（例えば。、 <input type="text" name="bogusField" style="display: none;" />
2. JavaScript イベント ハンドラー内で Enter キー フォームの送信動作をブロックします (例: ここ または ここ）。さらに良いのは、これに役立つ GUI ツールキット (GWT など) を使用することです。