JSF2 Primefaces Enter-Taste keycode=13 funktioniert nicht mit commandButton

Die eigentliche Frage: ich versuche zu verstehen, die Interaktion zwischen einem javascript-snippet habe ich gefunden und die Primefaces commandButton.
Die javascript-Codeausschnitt zugeordnet ist, die onkeypress-Attribut des JSF h:form-tag.
Ich habe dieses snippet funktioniert auf einigen meiner Seiten, jedoch nicht auf andere. Als ich versuchte, zu zerlegen die nicht-essentials zu Fragen, die Frage der javascript aufgehört zu arbeiten komplett.

Scheint es etwas zu sein, was ich nicht verstehe, da dieser code nicht funktioniert. Hinweis: der code funktioniert, wenn der Benutzer auf die Schaltfläche klickt. Ich will, dass es funktioniert, wenn Sie drücken Sie die Enter-Taste. Ich habe genommen, so viel wie ich kann und lobotomized Stil-Richtlinien um es kürzer zu machen.

<!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. ich habe auch versucht if (event.keyCode == 13) { dieses.submit(); }

HINZUGEFÜGT, NACHDEM WEITERE FORSCHUNG:
Sehr zu meinem Leidwesen, ich habe eine Primefaces-spezifische Lösung für dieses, dass hätte ich auch früher finden. Es stellt sich heraus, dass entweder kein JavaScript benötigt wird an alle mit der einfachen addition der p:focus-tag. Hier ist die XHTML-Datei, die tatsächlich funktioniert. Es ist keine änderung der backing-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>

Diese wird mir erlauben, um die Analyse durchzuführen von meinem ursprünglichen problem (da habe ich ein p:Fokus-tag auf Seiten, die nicht funktionieren noch), die werde ich separat.

InformationsquelleAutor Dean | 2013-07-25

1

Seit PrimeFaces basiert auf jQuery, sollten Sie sparen Sie sich Zeit und nutzen Sie jQuery für Ihre Registrierung Schlüssel-handler des Formulars. Natürlich müssen Sie erlauben, geben Sie auf Elemente, die es unterstützen und nicht auslösen (und sollte nicht trigger) Formular Absenden. Wenn Sie nicht zulassen GEBEN Sie auf Texte, die Sie verärgern Ihre Nutzer großartige.

Aus meiner Erfahrung, der Tastendruck ist nicht genug, müssen Sie auch behandeln 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>
```
Siehe auch dieses Thema: Wie um zu verhindern, dass ENTER-Tastendruck zu übermitteln eines web-Formulars? für mehr nicht-primefaces-Fragen.

Danke! Dies funktionierte großartig mit einer Einschränkung für die green-javascript-Entwickler wie mich. Ich fand es notwendig, surround-Funktionen, mit // <![CDATA[ // ]]> wenn er in meiner xhtml-Seite.
Der CDATA-wurde nicht benötigt, wenn ich zog das Skript in eine separate JavaScript-Datei.
Ja, innerhalb der JSF-Seite, die Sie brauchen, CDATA oder die Flucht...
FOLLOW-UP: Die oben (p:focus) - Lösung funktioniert nicht mit einiger Primefaces-Komponenten. Ich fand es notwendig, um die defaultCommand tag zu machen SelectOneMenu funktioniert, wenn ich es im Ort, der InputText oben. <p:commandButton id="btn" value="AUSFÜHREN" actionListener="#{trayBean.ausführen}"/> <p:defaultCommand target="btn"/>
Was genau hat nicht funktioniert? Als für die Standard-Aktion, war ich kontrolliere es über zusätzliche handler, aber es gab einige Orte, wo es keine Standard-Aktion erforderlich war. Ich bin immer noch der Verbesserung dieser code, wenn ein problem gefunden wird, sowieso.

InformationsquelleAutor Danubian Sailor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.