jsf - 在表单中按 Enter 时执行的默认操作

Question

我有一个 jsf 1.2 表单，其中有两个按钮和几个输入字段。第一个按钮丢弃输入的值并使用数据库中的值重新填充页面，第二个按钮保存输入的值。当用户在光标位于其中一个输入字段时按 Enter 键、提交表单并执行与第一个按钮关联的操作时，就会出现问题。

代码如下所示:

<h:commandButton action="#{bean.reset}" value="Reset" />
<h:commandButton action="#{bean.save}" value="Save" />

<!-- h:datatable with several h:inputText elements -->

是否可以将特定按钮声明为按 Enter 时的默认操作？这种行为实际上是在某处指定的吗？

Answer 1

这不是 JSF 特有的。这是 HTML 特有的。 HTML5 forms specification section 4.10.22.2基本上指定第一个出现的 <input type="submit">相同的“树顺序”中的元素 <form>因为 HTML DOM 树中的当前输入元素将在按下 Enter 键时被调用。

基本上有两种解决方法:

• 使用 JavaScript 捕获 Enter 键按下并调用所需的按钮。

    <h:form onkeypress="if (event.keyCode == 13) { document.getElementById('formid:saveid').click(); return false; }">
  

  如果表单中有文本区域，您希望将 JS 放在所有非文本区域输入元素上，而不是表单上。另请参阅Prevent users from submitting a form by hitting Enter .

  <小时/>

• 交换 HTML 中的按钮并使用 CSS float 将它们交换回来。

    <div style="width: 100px; clear: both;">
        <h:commandButton action="#{bean.save}" value="Save" style="float: right;" />
        <h:commandButton action="#{bean.reset}" value="Reset" style="float: left;" />
    </div>
  

  它可能只需要一些像素微调。当然把CSS放在自己的.css中文件;使用style这是不好的做法，上面的例子是为了简洁起见。

  <小时/>

如果您碰巧使用 PrimeFaces，从 3.2 开始您可以使用 <p:defaultCommand> 以声明方式标识在表单中按 Enter 键时应调用的按钮。

<h:form>
    <p:defaultCommand target="save" />
    ...
    <h:commandButton id="reset" action="#{bean.reset}" value="Reset" />
    <h:commandButton id="save" action="#{bean.save}" value="Save" />
</h:form>

它在幕后使用 JavaScript 来附加 keydown家长的听众 <h:form>依次检查是否在非文本区域/按钮/链接元素中按下了 Enter 键，然后调用 click()在目标元素上。基本上与本答案中提到的第一个解决方法相同。