按下表格中的input时要执行的默认操作
我有一个两个button和几个input字段的jsf 1.2表单。 第一个button放弃input的值，并用db中的值重新填充页面，第二个button保存input的值。 当用户在input字段之一时按下Enter键，就会出现问题，表单被提交并且与第一个button关联的操作被执行。
代码如下所示：
<h:commandButton action="#{bean.reset}" value="Reset" /> <h:commandButton action="#{bean.save}" value="Save" /> <!-- h:datatable with several h:inputText elements --> 按回车键时，是否可以将特定button声明为默认操作？ 这种行为实际上指定的地方？
这不是JSF特有的。 这是特定于HTML。 HTML5格式规范第4.10.22.2节基本上规定，在input按下时，将调用与HTML DOM树中的当前input元素相同的<form>中的“树顺序”中的第一个发生的<input type="submit">元素。
基本上有两种解决方法：
-
使用JavaScript捕捉input键按下并调用所需的button。
<h:form onkeypress="if (event.keyCode == 13) { document.getElementById('formid:saveid').click(); return false; }">如果你在表单中有textareas，你想把JS放在所有非textareainput元素上而不是表单上。 另请参阅防止用户通过按Enter键提交表单 。
-
交换HTML中的button，并使用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键时应该调用的button。
<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元素中是否按下了回车键，然后调用目标元素。 基本上相同的第一个提到这个答案的解决方法。
我find了一个不太冒险的方式，效果很好。 这个想法是一个隐藏的命令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" />
这将导致一个不可见的命令button，根据第一个下一个提交button规则可以被激活。
根据BalusC的build议，使用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
要隐藏元素，你可以使用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
仅在文本input字段（ 源 ）中忽略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>
