按下表单中的输入时要执行的默认操作

Question

我有一个带有两个按钮和几个输入字段的jsf 1.2表单.第一个按钮放弃输入的值,并使用db中的值重新填充页面,第二个按钮保存输入的值.当用户在光标位于其中一个输入字段中时按下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形式指定部4.10.22.2基本上指定的第一个发生的历史<input type="submit">在相同的"树形结构顺序"元素<form>作为HTML DOM树中的当前输入元件将在进入压机被调用.

基本上有两种解决方法:

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

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

  如果你在表单中有textareas,你想把JS放在所有非textarea输入元素而不是表单上.另请参阅通过按Enter键阻止用户提交表单.

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

  <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>,后者依次检查是否在非textarea/button/link元素中按下了回车键,然后调用click()目标元素.基本上与本回答中提到的第一个解决方法相同.

Answer 2

我发现了一种不那么笨拙且运作良好的方法.这个想法是隐藏的commandButton.

不幸的是display:none不能使用样式,因为这样commandButton会被忽略.visibility:hidden不好,因为它保留了组件的空间.

但我们可以使用以下CSS 微调样式,使其视觉外观的大小为零:

.zeroSize {
    visibility: hidden;
    padding: 0px;
    margin: 0px;
    border: 0px;
    width: 0px;
    height: 0px;
}

而现在所需要的只是:

<h:commandButton value="" action="#{bean.save}" class="zeroSize" />

这将导致一个不可见的命令按钮,根据第一个下一个提交按钮规则可以激活该按钮.

Answer 3

要隐藏元素，您可以使用 css：style="visibility: hidden"

如果您使用 primefaces，要更改默认操作，您可以使用：<p:defaultCommand target="yourButtonDefault" /> 例如：

<h:form id="form">

    <h:panelGrid columns="3" cellpadding="5">
        <h:outputLabel for="name" value="Name:" style="font-weight:bold"/>
        <p:inputText id="name" value="#{defaultCommandBean.text}" />
        <h:outputText value="#{defaultCommandBean.text}" id="display" />
    </h:panelGrid>

    <p:commandButton value="Button1" id="btn1" actionListener="#{defaultCommandBean.btn1Submit}" ajax="false"/>
    <p:commandButton value="Button2" id="btn2" actionListener="#{defaultCommandBean.btn2Submit}" />
    <h:commandButton value="Button3" id="btn3" actionListener="#{defaultCommandBean.btn3Submit}" />

    <p:defaultCommand target="btn3" />

</h:form>

来源：Primefaces 新组件：DefaultCommand