PrimeFaces在按Enter键时禁用提交 [英] PrimeFaces disable submit on pressing enter key

问题描述

PrimeFaces在按Enter键时禁用提交.

PrimeFaces disable submit on pressing enter key.

我正在运行在WildFly 8.2 Final上运行的PrimeFaces 5.1.

I’m, running PrimeFaces 5.1 running on WildFly 8.2 Final.

我有一个对话框，带有两个inputNumbers和两个按钮.并且第一个inputNumber对ajax模糊事件进行一些计算.按钮旁边是在bean中进行一些计算的按钮.问题在于，当用户在焦点位于inputNumber时按Enter键时，按钮的动作被触发，这确实很烦人.有没有一种方法可以禁用对话框上的回车键提交?

I have dialog, with two inputNumbers and two buttons. And the first inputNumber does some calculation on ajax blur event. Next to it is button which does some calculation in bean. And the problem is that when users press enter while focus is in inputNumber the button’s action gets fired and it’s really annoying. Is there a way to disable submitting with enter key on dialog?

这是一个小的xhtml对话框，可以模拟我的行为:

Here is small xhtml dialog which can simulate my behavior:

<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");
    }
}

问题在于我无法通过以下方式禁用回车键:

The catch is i can't disable enter key with:

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

因为客户要求提供热键支持，然后输入Enter即可用于提交表单，在某些情况下重新计算其他一些值等等...

Because client asked for hotkeys support and enter is used for submiting forms, recalculation some other values in some cases etc...

推荐答案

正如Nimnio引用的答案所说，是特定于HTML和浏览器的.

As the answer referenced by Nimnio says, this is specific to HTML and browsers.

在使用PrimeFaces时，我认为这种行为是不合适的. 对于这样的所有表单，我更喜欢全局禁用它:

I consider this behavior to be inappropriate when using PrimeFaces. I prefer to disable it globally, for all forms like this:

$('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键在文本区域中添加换行符.

The target check allows the other default behaviors to work, like adding a line break in a textarea by pressing Enter.

要考虑新添加的表单，您需要在每个AJAX请求之后调用上述脚本.有多种方法可以执行此操作，例如p:outputPanel autoUpdate="true"中的<script>或在p:ajaxStatus的oncomplete回调中调用函数.

To take into account new ajaxically added forms you'll need to call the above script after every AJAX request. There are multiple ways to do that, such as a <script> in a p:outputPanel autoUpdate="true", or calling a function in a p:ajaxStatus's oncomplete callback.

如果由于某种原因该解决方案不合适，请考虑使用本地化程度更高的解决方案:

If this solution is not appropriate for some reason then consider the more localized one:

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

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

Returning false here disables the non-AJAX default submit.

这篇关于PrimeFaces在按Enter键时禁用提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！