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

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 forms specification section 4.10.22.2基本上指定在相同的<input type="submit">中作为HTML DOM树中当前输入元素的“树顺序”中的第一个出现的<form>元素将在输入press上调用。

基本上有两种解决方法：

• 使用JavaScript捕获回车键并调用所需按钮。 <h:form onkeypress="if (event.keyCode == 13) { document.getElementById('formid:saveid').click(); return false; }"> 如果你在表单中有textareas，你想把JS放在所有非textarea输入元素而不是表单上。另见Prevent users from submitting a form by hitting 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 new component: DefaultCommand

Answer 4

按照BalusC建议使用JavaScript解决问题，我写了一些jQuery代码来完成这项工作：

$(function(){
  $('form').on('keypress', function(event){
    if(event.which === 13 && $(event.target).is(':input')){
        event.preventDefault();
        $('#save').trigger('click');
    }
  });
});

CodePen：http://codepen.io/timbuethe/pen/AoKJj

Answer 5

仅在文本输入字段（source）中忽略ENTER键：

<script type="text/javascript"> 

  function stopRKey(evt) { 
     var evt = (evt) ? evt : ((event) ? event : null); 
     var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
     if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
  } 

  document.onkeypress = stopRKey; 

</script>

Answer 6

您可以使用h:commandLink作为第一个按钮，并使用像h:commandButton这样的css进行样式设置。

例如，bootstraps "btn btn-default"在commandLink和commandButton上看起来是一样的。