JSF2 Primefaces Enter key keycode=13 不适用于 commandButton答案

【问题标题】：JSF2 Primefaces Enter key keycode=13 not working with commandButtonJSF2 Primefaces Enter key keycode=13 不适用于 commandButton
【发布时间】：2013-07-25 17:46:56
【问题描述】：

真正的问题：我试图了解我发现的 javascript sn-p 和 Primefaces commandButton 之间的交互。 javascript sn-p 分配给 JSF h:form 标记的 onkeypress 属性。我有这个 sn-p 在我的一些页面上工作，但在其他页面上没有。当我试图去除不必要的东西来问那个问题时，javascript 完全停止了工作。

似乎有些东西我不明白，因为这段代码不起作用。请注意，如果用户实际单击按钮，代码确实有效。当他们按下 Enter 键时，我希望它能够工作。我已经尽可能地剥离了样式指南并对其进行了精简以使其更短。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Tray Report</title>
        <h:outputStylesheet library="css" name="postalreports.css"  />
    </h:head>
    <h:body>
        <h:form id="thisform"  onkeypress="if (event.keyCode == 13) { document.getElementById('thisform:btn').click(); return false; }" > 
            <p:panel id="panel" header="Report For Days">  
                <p:messages id="messages" />  
                <p:inputText id ="days" value="#{trayBean.days}" >
                </p:inputText>
            </p:panel>
            <p:commandButton id="btn" value="RUN" actionListener="#{trayBean.run}"/>            
        </h:form>
    </h:body>
</html>

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class TrayBean implements Serializable {
    private Integer days = 1;
    public TrayBean() {}
    public void run() {
        System.out.println("do something here");
    }
    public Integer getDays() {  return days; }
    public void setDays(Integer days) { this.days = days; }
}

附：我也试过 if (event.keyCode == 13) { this.submit(); }

在额外研究后添加：令我懊恼的是，我找到了一个我应该早点找到的 Primefaces 特定解决方案。事实证明，只需添加 p:focus 标签，就根本不需要 JavaScript。这是实际工作的 XHTML 文件。支持 bean 没有变化。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>Tray Report</title>
    </h:head>
    <h:body>
        <h:form id="thisform"> 
            <p:focus/>
            <p:panel id="panel" header="Report For Days">  
                <p:messages id="messages" />  
                <p:inputText id ="days" value="#{trayBean.days}" >
                </p:inputText>
            </p:panel>
            <p:commandButton id="btn" value="RUN" actionListener="#{trayBean.run}"/>            
        </h:form>
    </h:body>
</html>

这将允许我完成对原始问题的分析（因为我在尚未工作的页面上有一个 p:focus 标签），我将单独发布。

【问题讨论】：

标签： javascript jsf-2 primefaces commandbutton

【解决方案1】：

由于 PrimeFaces 是基于 jQuery，您应该节省时间并使用 jQuery 来注册表单的键处理程序。当然，您必须允许输入支持它并且不会触发（也不应该触发）表单提交的元素。如果您不允许在文本区域输入 ENTER，您会极大地惹恼您的用户。

根据我的经验，keypress 是不够的，你还需要处理 keyup：

<script type="text/javascript">
$(document).ready(function () {
var handler = function(event){
        if (event.which == 13) {
            var el = event.target;
            if (/textarea/i.test(el.tagName) || /button/i.test(el.tagName))
                return true;
            if (/input/i.test(el.tagName) && /file/i.test(el.type))
                return true;
            if (_handler)
                setTimeout(_handler, 1);
            event.stopPropagation();
            return false;
        }
        return true;
};
$('form').keyup(handler).keypress(handler)
});
</script>

另请参阅此主题：How to prevent ENTER keypress to submit a web form? 了解更多与primefaces 无关的问题。

【讨论】：

谢谢！这对于像我这样的绿色 javascript 开发人员来说非常有用。我发现有必要在放置在我的 xhtml 页面中时用 // 包围这些函数。
将脚本移动到单独的 JavaScript 文件时不需要 CDATA。
跟进：上述 (p:focus) 解决方案不适用于某些 Primefaces 组件。当我使用它代替上面的 InputText 时，我发现有必要使用 defaultCommand 标记来使 SelectOneMenu 工作。
究竟是什么没有奏效？至于默认操作，我是通过额外的处理程序来控制它，但是有些地方不需要默认操作。无论如何，当发现问题时，我仍在改进此代码。
\@Lukasz 您提供的代码运行良好。在四处挖掘的过程中，我遇到了一个不需要 JavaScript 但专门使用 Primefaces 标签的替代解决方案。除非必要，否则公司不希望我使用 JavaScript。我发现使原始 xhtml 工作所需的唯一事情是添加 Primefaces 标记。但是，如果我将 InputText 字段替换为 SelectOneMenu，则该标记不起作用。我能够使用标签解决这种情况。