Wie verwenden Sie die Maske im input-Feld in JSF 2 + RichFaces 4?

Brauche ich einige Masken in meine input-Felder in meinem Formular.
Ich versuche, legen Sie die jQuery.js und jQuery.MaskedInput.js zeigen, wie in den folgenden code:

<h:head>
    <h:outputScript name="jquery-1.6.4.min.js" library="javascript" />
    <h:outputScript name="jquery.maskedinput-1.3.js" library="javascript" />

    <script>
        jQuery(function($){
           $("#date").mask("99/99/9999");
           $("#phone").mask("(999) 999-9999");
           $("#tin").mask("99-9999999");
           $("#ssn").mask("999-99-9999");
       });
    </script>

    <title>TITLE</title>
</h:head>

<h:body>
     <h:form id="form">
        <h:inputText id= "date"  />
    </h:form>
</h:body>

Aber bisher nichts.

UPDATE
Mit BalusC $("[id='form:phone']").mask("(99) 9999-9999"); funktioniert es einwandfrei! (danke dude).
Aber ich benötigen, wenden Sie diese Maske in eine datatable :

<script>
    jQuery(function($){
       $("input.phones").mask("(999) 999-9999");
   });
</script>

<title>TITLE</title>

 <h:form id="form">

   <h:panelGrid columns="3">
        <h:outputLabel for="phones" value="Telefone(s) :" />                
        <h:dataTable id="phones" value="#{profile.user.userPhones}" var="item">
            <h:column>
                <h:inputText id= "phone" value="#{item.phone}" />
            </h:column>
            <h:column>
                <h:commandButton value="Remove" action="#{profile.removePhone}"/>
            </h:column>
            <h:column>
                <rich:message id="m_phone" for="phone" />
            </h:column>
        </h:dataTable>
    <h:commandButton value="Add" action="#{profile.addPhone}"/>
   </h:panelGrid>    

</h:form>

Irgendeine Idee ?

InformationsquelleAutor Valter Silva | 2011-10-24

7

JavaScript/jQuery läuft im browser und funktioniert auf die HTML-DOM-Baum, der erzeugt wird von JSF und an den browser gesendet wird, ist es nicht abfangen auf der JSF-Komponente Baum selbst. Ihre $("#date") wird nichts zurück es gibt kein element mit dieser ID in der HTML-DOM-Baum. Öffnen Sie die Seite in Ihrem browser, Rechtsklick und View Source. Du wirst sehen, dass es tatsächlich erwirtschaftet worden als <input id="form:date">, nicht als <input id="date">.

Sollten Sie stattdessen den folgenden Selektoren (beachten Sie, dass : ist eine illegale Zeichen in CSS sind und daher escaped werden):
```
$("#form\\:date").mask("99/99/9999");
$("#form\\:phone").mask("(999) 999-9999");
$("#form\\:tin").mask("99-9999999");
$("#form\\:ssn").mask("999-99-9999");
```
oder, ohne die Notwendigkeit für explizite escape:
```
$("[id='form:date']").mask("99/99/9999");
$("[id='form:phone']").mask("(999) 999-9999");
$("[id='form:tin']").mask("99-9999999");
$("[id='form:ssn']").mask("999-99-9999");
```
Oder, alternativ, nur geben Sie eine classname:
```
<h:inputText id="date" styleClass="date" />
<h:inputText id="phone" styleClass="phone" />
<h:inputText id="tin" styleClass="tin" />
<h:inputText id="ssn" styleClass="ssn" />
```
kann dann mehr generisch wie folgt ausgewählt werden, ohne die Notwendigkeit für das hantieren mit IDs möglicherweise mehrere input-Felder vom gleichen Typ in der Ansicht, wie in einem <h:dataTable>:
```
$("input.date").mask("99/99/9999");
$("input.phone").mask("(999) 999-9999");
$("input.tin").mask("99-9999999");
$("input.ssn").mask("999-99-9999");
```
- Balusc, ich verfolge deinen Ansatz und mir helfen, Dank dude. Aber ich versuche zu verstehen, die id generiert, die von meiner datatable zu verwenden, in der jQuery-Maske, könnten Sie mir bitte helfen mit, dass ?
- Ah, es ist von innen eine datatable? Sie konnte die enden mit Selektor $("[id$=date]"), aber mit einem CSS-Klasse ist viel besser (lies: nicht fehleranfällig) für den Fall, dass Sie habe mehrere von Ihnen jetzt.
- Danke ! mit $("[id$=date]") wirklich mein problem lösen. Sie sagte, CSS zu benutzen, aber es gibt kein Attribut 'class' in <h:inputText />, should ' NT styleClass statt ?
- Ja, styleClass in der Tat.
- zum ersten mal habe ich Ihnen helfen , ayeeeeee! 😉 (by the way, Sie haben schöne Kinder, danke für alles Kumpel)
- Ich habe versucht, mit Ihrem Beispiele, die Maske funktioniert, ist aber meine Methode nicht aufgerufen wird, auf die Schaltfläche klicken, irgendwelche Ideen?
- es ist nicht klar, was genau meinst du mit "meiner Methode" im Zusammenhang mit der ursprünglichen Frage, aber dies scheint nicht verwandt zu sein, um die Eingabe zu maskieren. Bitte drücken Sie Ask Question wenn Sie eine neue Frage.
- Ich habe die Frage jetzt: stackoverflow.com/q/10920815/745235]
InformationsquelleAutor BalusC

Mithilfe von JSF und RichFaces
Ich es geschafft, den Konflikt zu lösen Masken wie diese:

var $j = jQuery.noConflict();

window.onload = function () {
    $j(#{rich:element('parProcecessoNumProtocolo')}).mask('9999.999999/9999-99');
}

InformationsquelleAutor erivanio

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.