按下回车键,PrimeFaces禁用提交

Question

按下回车键,PrimeFaces禁用提交.

我在WildFly 8.2 Final上运行PrimeFaces 5.1.

我有对话框,有两个inputNumbers和两个按钮.第一个inputNumber对ajax blur事件进行一些计算.旁边是在bean中进行一些计算的按钮.问题是,当用户按下enter而焦点位于inputNumber时,按钮的动作会被触发,这真的很烦人.有没有办法在对话框中禁用使用回车键提交？

这是一个小的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; }">

因为客户端要求热键支持和输入用于提交表单,在某些情况下重新计算其他一些值等...

Answer 1

我认为您使用JavaScript捕获输入键按下并且什么都不做.

<h:form onkeypress="if (event.keyCode == 13) { return false; }">

参考:https://stackoverflow.com/a/5486046/201891

return false;如果在HTML中的事件处理程序属性的末尾调用,则取消跨浏览器的事件.据我所知,这种行为在任何地方都没有正式指定.

参考:https://stackoverflow.com/a/1648854/201891

更新

听起来您只想在焦点位于特定字段时禁用Enter键.您也可以为此编写Javascript方法并将其绑定到onkeypress.编写一个Javascript方法,例如"如果按下回车键并且焦点在此字段中,则返回false;否则返回true".

Answer 2

正如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键在textarea中添加换行符.

要考虑新的ajaxically添加表单,您需要在每次AJAX请求后调用上面的脚本.有多种方法可以做到这一点,如<script>在一个p:outputPanel autoUpdate="true"或调用一个函数p:ajaxStatus的oncomplete回调.

如果此解决方案由于某种原因不合适,那么请考虑更本地化的解决方案:

<h:form onsubmit="return false;">

返回false此处将禁用非AJAX默认提交.