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表单中的按钮用于提交表单。 更改按钮以输入type =“button”，这应该修复它。

或者，将button =“button”添加到按钮元素。

Answer 2

首先，为“搜索”按钮提供ID。 然后，在文本框上，你可以使用这样的（javascript）函数拦截客户端事件onkeydown ：

  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. 添加另一个输入字段。 通过样式化来隐藏它，使其不可见。 （例如， <input type="text" name="bogusField" style="display: none;" />
2. 在JavaScript事件处理程序中阻止输入密钥表单提交行为（例如， 此处或此处 ）。 更好的是，使用可能有助于此的GUI工具包（例如，GWT）