PrimeFaces在按Enter键时禁用提交。
我正在运行在WildFly 8.2 Final上运行的PrimeFaces 5.1。
我有对话框,有两个inputNumbers和两个按钮。并且第一个inputNumber对ajax模糊事件进行一些计算。按钮旁边是在bean中进行一些计算的按钮。问题是,当用户在焦点位于inputNumber时按Enter时,按钮的动作被触发,这确实很烦人。有没有一种方法可以禁止在对话框上使用Enter键提交?
这是一个小的xhtml对话框,可以模拟我的行为:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions" > <p:dialog id="id_example" header="Test dialog" widgetVar="exampleDialog" modal="true" closable="true" > <h:form id="id_example_form"> <p:panelGrid columns="3" styleClass="noBorders"> <h:outputText value="Input 1:" /> <pe:inputNumber id="Input1" value="#{exampleBean.number1}"> <p:ajax event="blur" update="valueInput1" /> </pe:inputNumber> <p:commandButton value="Check something else" action="#{exampleBean.checkForUsername()}" update=":growl_form" /> <h:outputText value="Input 1:" /> <p:inputText id="valueInput1" value="#{exampleBean.number1}" /> <p:commandButton value="Save" action="#{exampleBean.save()}" oncomplete="PF('exampleDialog').hide();" update=":growl_form" /> </p:panelGrid> </h:form> </p:dialog> </ui:composition>
和豆:
package si.pucko.beans; import java.io.Serializable; import java.math.BigDecimal; import java.math.BigInteger; import javax.faces.view.ViewScoped; import javax.inject.Named; import si.pucko.util.Util; @Named(value = "exampleBean") @ViewScoped public class ExampleBean implements Serializable { private static final long serialVersionUID = 1L; private BigDecimal number1; public ExampleBean() { number1 = new BigDecimal(BigInteger.ONE); } public BigDecimal getNumber1() { return number1; } public void setNumber1(BigDecimal number1) { this.number1 = number1; } public void checkForUsername() { Util.ShowWarning("Just testing"); } public void save() { Util.ShowWarning("Saved"); } }
问题是我不能使用以下命令禁用回车键:
<h:form onkeypress="if (event.keyCode == 13) { return false; }">
因为客户要求热键支持并输入用于提交表单,所以在某些情况下需要重新计算其他一些值,等等。
正如Nimnio引用的答案所说,这特定于HTML和浏览器。
我认为使用PrimeFaces时这种行为是不合适的。对于这样的所有表单,我都希望全局禁用它:
$('form').off('keypress.disableAutoSubmitOnEnter').on('keypress.disableAutoSubmitOnEnter', function(event) { if (event.which === $.ui.keyCode.ENTER && $(event.target).is(':input:not(textarea,:button,:submit,:reset)')) { event.preventDefault(); } });
该target检查允许其他默认行为起作用,例如通过按Enter键在文本区域中添加换行符。
target
为了考虑新添加的表单,您需要在每个AJAX请求之后调用上述脚本。有多种方法可以执行此操作,例如<script>在中的p:outputPanel autoUpdate="true"或在p:ajaxStatus的oncomplete回调中调用函数。
<script>
p:outputPanel autoUpdate="true"
p:ajaxStatus
oncomplete
如果由于某种原因该解决方案不合适,请考虑本地化的解决方案:
<h:form onsubmit="return false;">
返回false此处将禁用非AJAX默认提交。
false