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 フォームを送信できないようにする方法は? プライムフェイス以外の問題については。

于 2013-07-26T08:31:57.523 に答える