在表单中按 Enter 时要执行的默认操作 [英] Default action to execute when pressing enter in a form

问题描述

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

代码如下:

<h:commandButton action="#{bean.save}" value="Save"/><!-- h:datatable 带有几个 h:inputText 元素 -->

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

解决方案

这不是特定于 JSF 的.这是特定于 HTML 的.HTML5 表单规范第 4.10.22.2 节 基本上指定了第一个在与 HTML DOM 树中的当前输入元素相同的

中的树顺序"中出现 元素将是按下回车键时调用.

基本上有两种解决方法:

• 使用 JavaScript 捕获回车键按下并调用所需按钮.

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

  如果表单中有 textareas，您希望将 JS 放在所有非 textarea 输入元素上，而不是放在表单上.另请参阅通过按 Enter 防止用户提交表单.

  ---

• 交换 HTML 中的按钮并使用 CSS 浮动将它们交换回来.

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

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

  ---

如果你碰巧使用 PrimeFaces，从 3.2 开始你可以使用 <p:defaultCommand> 声明性地标识在表单中按下回车键时应调用的按钮.

<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 侦听器附加到父 ，然后检查是否按下了 Enter 键一个非 textarea/button/link 元素，然后在目标元素上调用 click() .与本答案中提到的第一个解决方法基本相同.

I've got a jsf 1.2 form with two buttons and several input fields. The first button discards the entered values and repopulates the page with values from a db, the second button saves the entered values. The problem occurs when the user presses enter while the cursor is in one of the input fields, the form gets submitted and the action associated with the first button gets executed.

The code looks like this:

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

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

Is it possible to declare a specific button as the default action when pressing enter? Is this behaviour actually specified somewhere?

解决方案

This is not specific to JSF. This is specific to HTML. The HTML5 forms specification section 4.10.22.2 basically specifies that the first occuring <input type="submit"> element in the "tree order" in same <form> as the current input element in the HTML DOM tree will be invoked on enter press.

There are basically two workarounds:

• Use JavaScript to capture the enter key press and invoke the desired button.

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

  If you have textareas in the form, you'd like to put the JS on all non-textarea input elements instead of on the form. See also Prevent users from submitting a form by hitting Enter.

  ---

• Swap the buttons in HTML and use CSS floats to swap them back.

  <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>
  

  It may only require some pixel finetuning. Of course put CSS in its own .css file; using style is poor practice, the above example is for brevity.

  ---

If you happen to use PrimeFaces, since 3.2 you can use <p:defaultCommand> to declaratively identify the button which should be invoked when pressing enter key within the form.

<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>

It's under the covers using JavaScript for that which attaches a keydown listener to the parent <h:form> which in turn checks if the enter key is pressed in a non-textarea/button/link element, and then invokes click() on the target element. Basically the same as 1st mentioned workaround in this answer.

这篇关于在表单中按 Enter 时要执行的默认操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！