Question

真正的问题：我正在尝试理解我找到的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; }
}

P.S。我也试过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标记），我将单独发布。

Answer 1

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

根据我的经验，按键是不够的，你还需要处理键盘：

<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?了解更多与非主要相关的问题。

JSF2 Primefaces输入密钥keycode = 13不能与commandButton一起使用

1 个答案: