潜在的 Primefaces 对话框输入提交 Bug？

发布于 2024-10-31 06:24:46 字数 1499 浏览 1 评论 0原文

我的对话框表单设置与下面的 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>

原文

I have the exact same dialog form setup as the primefaces example below. When I put my cursor in the p:inputText on the below primefaces example and hit enter the window is closed automatically. On my example, I've even removed all links/buttons etc and just have a form and an input and it still closes the dialog when hitting enter. Any way around this?

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

mycode:

<?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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

阳光下慵懒的猫 2024-11-07 06:24:46

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

回复收藏 0 原文

烟─花易冷 2024-11-07 06:24:46

将以下带有一点 JavaScript 的 onkeyup 属性添加到或元素以防止按下 Enter 键时的默认操作。

onkeyup="return event.keyCode != 13"

Enter 键的键码为 13，因此按下该键时，上面的代码将返回 false，因此该元素的默认操作将被阻止。

Add the following onkeyup attrubute with a little JavaScript to the <h:form> or the <h:inputText> element to prevent the default action on enter press.

onkeyup="return event.keyCode != 13"

The enter key has a keycode of 13, so the above will return false when it is pressed and so the element's default action will be blocked.

回复收藏 0 原文

岁月静好 2024-11-07 06:24:46

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

使用

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

当使用较新的 PrimeFaces（3.2+？）版本时，您还可以按照此处所述

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

展示链接：

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

当然，这个标签必须直接在 h:form 标签下面，否则该标签就不是不工作。

有类似的内容

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

当不使用 PrimeFaces 时，您必须在表单上

，如 c12 之前的答案中所述。以上两种情况都会导致 IE 浏览器表现得像 FF、Chrome 等。当根本不使用 IE 时，BalusC 的解决方案就足够了。

Let me just wrap it up from a 2013 perspective:

When using newer PrimeFaces (3.2+?) versions, you can also use

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

as described here:

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

ShowCase link:

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

Of course, this tag must be directly underneath the h:form tag, otherwise the tag isn't working.

When not using PrimeFaces, you must have something like

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

on the form, as described in the earlier answer by c12.

Both of the above will cause IE browsers to behave like FF, Chrome, etc. When not using IE at all, BalusC's solution suffices.

回复收藏 0 原文

戈亓 2024-11-07 06:24:46

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

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

我的解决方案非常简单并且有效。只需让您的提交按钮成为 HTML 代码中的第一个按钮即可。按钮的正确布局/排列可以通过 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 之前。

I got the same Problem. I have a From with several Dozens InputTexts and several Buttons. When i pressed 'enter' in a inputText, the first Button was triggered and NOT the submit Button.

The hints above (onkeyup="return event.keyCode != 13" and p:commandButton with display:none) didn't work for me.

My solution was pretty simple and works. Just let your Submit-Button be the first button in your HTML-Code. The correct layout/arrangement of Button can be done via CSS, i.e. "float: left;"

Example:

<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" />

After putting my Save-Button before my "Previous"-Button, everything worked fine! After pushing "enter" within a inputText, the Form gets submitted now and the "float:left" places the Prev-Button before the Save-Button in the visual Layout.

回复收藏 0 原文

~没有更多了~