按下回车键，PrimeFaces禁用提交

Posted 2021-03-27

按下回车键，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 referenced by 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默认提交。

另一答案

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

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

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

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

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

更新

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

另一答案

当按下回车键时，捕获jQuery（“：submit”）元素的表单并触发表单上列出的第一个表单是默认的浏览器行为。

这在调试器上看起来很奇怪，因为如果你有一个函数，比如onclick =“handle（event）;”。

您转到文本字段，按Enter键，您将看到一个“人工”onclick事件，并将其传递给该表单的主要提交操作。

我要说的是，控制所发生事情的最可靠方法不是通过如上所述的onkeypress。我发现在所有情况下都不起作用。在soame案例中，onkeypress形式根本没有触发，你没有机会返回flase; / event.preventDefault（）;.我并不是100％确定所有使得onkeypress没有被触发的情况，但我怀疑框架代码在某些情况下阻止了事件冒泡。

最终，真正发生的是您的表单是由您的浏览器默认行为在输入文本字段的ENTER上提交的。事件的起泡不是提交表单的形式。这是尝试在表单上处理事件并防止默认行为的缺陷。那可能为时已晚。这很容易验证。如果你将ine inpu和onkeypress总是调到event.preventDefault（）。 （A）你杀了文本框没有文字写在texbox上（B）事件仍然存在，但浏览器仍无法提交表单。所以最重要的元素是：当浏览器以默认行为行事时，它的目标是什么？

所以你可以决定的是你将控制浏览器释放其默认行为的位置。您可以将其指向虚拟按钮。

这是我发现的唯一一种机制，我可以非常可靠地控制当你在一个带有表格的文本字段上输入时发生的事情，就是在那个表格上有一个众所周知的人工按钮，例如：

<input type="submit" onclick"return false;" style="border:none; background-color: #myAppBrackgroundColor;" />

您明白了这一点，以确保浏览器将提交事件路由到您控制下的按钮。

你必须要小心，IE尤其古怪。如果不是IE，你只需将按钮设置为display：none。由于IE，浏览器会将默认提交操作路由到可见的提交按钮（如果存在）。因此，您的按钮无法显示无。你必须使它在逻辑上可见，但在物理上是不可见的。为此，您可以使用边框并为其提供适合您应用的背景。

这种方法100％可靠。

另一答案

onkeydown和onchange（）

<h:form id="inputform">
   <p:inputText onkeydown="if (event.keyCode === 13) {onchange();return false;}"  >
      <p:ajax  update="updatearea"  /> 
   </p:inputText>
</h:form>

另一答案

我使用以下解决方案：

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

这可以防止表单提交。只有在此表单上只有ajax行为的情况下，它才能正常工作。