1

真正的问题：我正在尝试了解我找到的 javascript 片段与 Primefaces commandButton 之间的交互。javascript 片段分配给 JSF h:form 标记的 onkeypress 属性。我有这个片段在我的一些页面上工作，但在其他页面上没有。当我试图去除不必要的东西来问这个问题时，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; }
}

PS我也试过 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>

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

4

1 回答 1

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>

另请参阅此主题：如何防止按 ENTER 键提交 Web 表单？对于更多非primefaces相关的问题。

于 2013-07-26T08:31:57.523 回答