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

6 回答

• 4

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

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

  回复于 2024-05-03T06:25:23+08:00
• 3

  您可以使用 h:commandLink 作为第一个按钮，并使用css（如 h:commandButton ）进行样式设置 .

  例如，bootstraps "btn btn-default" 在commandLink和commandButton上看起来相同 .

  回复于 2024-05-03T06:25:23+08:00
• 105

  这不是JSF特有的 . 这是HTML特有的 . HTML5 forms specification section 4.10.22.2基本上指定"tree order"中的第一个出现的 <input type="submit"> 元素与HTML DOM树中当前输入元素相同的 <form> 将在输入按下时调用 .

  基本上有两种解决方法：

  • 使用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() . 基本上与本回答中提到的第一个解决方法相同 .

  回复于 2024-05-03T06:25:23+08:00
• 0

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

  不幸的是 display:none 样式无法使用，因为 commandButton 将被忽略 . visibility:hidden 不好，因为它保留了组件的空间 .

  但我们可以使用以下CSS微调样式，使其 visual appearance will be zero 的大小：

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

  And now all it takes is:

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

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

  回复于 2024-05-03T06:25:23+08:00
• 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

  回复于 2024-05-03T06:25:23+08:00
• 9

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

  回复于 2024-05-03T06:25:23+08:00