潜在的 Primefaces 对话框输入提交错误？答案

【问题标题】：Potential Primefaces Dialog Enter Submit Bug?潜在的 Primefaces 对话框输入提交错误？
【发布时间】：2011-08-01 04:19:53
【问题描述】：

我的对话框设置与下面的 primefaces 示例完全相同。当我将光标放在下面 primefaces 示例上的 p:inputText 并按 Enter 时，窗口会自动关闭。在我的示例中，我什至删除了所有链接/按钮等，只有一个表单和一个输入，并且在按 Enter 时它仍然关闭对话框。有什么办法吗？

http://www.primefaces.org/showcase/ui/dialogForm.jsf

我的代码：

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui"
    xmlns:dc="http://dc.dreamcatcher.com/facelet-taglib">
<ui:composition template="#{layoutBean.registeredTemplate}">
    <ui:define name="content">
        <h:form id="dreamModifyFrm">
        <p:commandLink  onclick="webSearchDlg.show();" value="open"/>
            <p:dialog header="#{bundle['dreamSearch.HEADER']}"
                      widgetVar="webSearchDlg" modal="true" styleClass="dialog dialog2"
                      draggable="false" resizable="false" showEffect="fade" position="top"
                      hideEffect="fade">
                <p:inputText id="searchText" value="#{dreamSearchBean.searchText}"/>
            </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>
</html>

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

将以下带有一点 JavaScript 的 onkeyup 属性添加到 <h:form> 或 <h:inputText> 元素，以防止按回车时的默认操作。

onkeyup="return event.keyCode != 13"

回车键的keycode为13，所以上面的按键按下时会返回false，所以元素的默认动作会被屏蔽。

【讨论】：

感谢 BalusC！我相信如果我这样做，那么我将无法按 Enter 键来实际提交带有所需按钮的表单。当我使用此代码时，我无法输入默认提交按钮。有没有办法将这两种方法结合起来？基本上，只需让一个按钮可用于 Enter 按键，而不是表单上的其他任何东西？
那就别用了。而是将按钮安排为 HTML DOM 树中的 firstnext 按钮元素，而不是输入元素。
所以只需在表单中首先列出提交按钮，然后使用 css 将其放置在页面底部？这就是我们需要用户按钮的地方
不，按钮不应位于输入元素之前。它们应该在输入元素之后。只有 HTML DOM 树中的 firstnext 会被调用。因此，如果表单底部有两个相邻的按钮，则只会调用第一个按钮。
我不明白如何使它成为“HTML DOM 树中的 firstnext 按钮元素”。我的应用程序在一个对话框窗口中，所以一个按钮在左上角（一个我不想提交并且在 onclick 上有一个 dialog.hide），另一个在底部（我要提交的那个） )

【解决方案2】：

我的问题已使用以下方法解决： IE 中有一个“功能”，如果您在表单中只有一个输入元素，则在输入元素中聚焦时按 Enter 会导致表单提交（无论您是否有提交按钮）。防止这种情况的一种方法是使用 style="display: none;" 添加第二个输入元素。

【讨论】：

伟大的工作。这通过添加为我解决了这个问题

【解决方案3】：

我遇到了同样的问题。我有一个带有几十个 InputTexts 和几个按钮的 From。当我在 inputText 中按下“输入”时，第一个按钮被触发，而不是提交按钮。

上面的提示（onkeyup="return event.keyCode != 13" 和 p:commandButton 和 display:none）对我不起作用。

我的解决方案非常简单且有效。只需让您的提交按钮成为 HTML 代码中的第一个按钮。 Button 的正确布局/排列可以通过 CSS 完成，即"float: left;"

例子：

<p:commandButton value="Save" ajax="true"   
    icon="ui-icon-disk" 
    update="myTable"
    actionListener="#{myTableBean.save()}" />

<p:commandButton id="previousPeriod" update="myTable"
    icon="ui-icon-triangle-1-w" ajax="true" type="push"
    style="float: left;"
    actionListener="#{myTableBean.scrollPrevious}"
    value="Previous" />

将保存按钮放在“上一个”按钮之前后，一切正常！在 inputText 中按下“enter”后，表单现在被提交，"float:left" 在可视布局中将 Prev-Button 放置在 Save-Button 之前。

【讨论】：

这不是 ap:commandbutton 没有你需要添加一个输入字段，如：

【解决方案4】：

让我从 2013 年的角度总结一下：

当使用更新的 PrimeFaces (3.2+?) 版本时，您也可以使用

<p:defaultCommand target="search-button" />

如此处所述：

http://blog.primefaces.org/?p=1787

案例链接：

http://www.primefaces.org/showcase-labs/ui/defaultCommand.jsf

当然，这个标签必须在 h:form 标签的正下方，否则标签不起作用。

当不使用 PrimeFaces 时，你必须有类似的东西

<h:inputText style="display: none;" />

在表单上，如 c12 之前的回答中所述。

以上两种情况都会导致IE浏览器表现得像FF、Chrome等。完全不使用IE时，BalusC的解决方案就足够了。

【讨论】：