jquery - 如何在JSF 2 + RichFaces 4的输入字段中使用mask？

我需要在表单的输入字段中添加一些掩码。
我尝试插入jQuery.js和jQuery.MaskedInput.js，如下面的代码所示:

<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("[phone]");
           $("#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>

到目前为止什么也没做。

更新
使用BalusC $("[id='form:phone']").mask("(99) 9999-9999");可以正常工作! (多谢，伙计)。
但我需要在数据表中应用此掩码:

<script>
    jQuery(function($){
       $("input.phones").mask("[phone]");
   });
</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>

任何想法 ？

最佳答案

JavaScript/jQuery在浏览器中运行，并在由JSF生成并发送到浏览器的HTML DOM树上运行，它不会在JSF组件树本身上进行拦截。您的$("#date")将不返回任何内容，因为HTML DOM树中不存在具有该ID的元素。在浏览器中打开页面，右键单击并查看源。您会看到它实际上是作为<input id="form:date">生成的，而不是作为<input id="date">生成的。

您应该改用以下选择器(请注意:在CSS中是非法字符，因此应转义):

$("#form\\:date").mask("99/99/9999");
$("#form\\:phone").mask("[phone]");
$("#form\\:tin").mask("99-9999999");
$("#form\\:ssn").mask("999-99-9999");

或者，无需显式转义:

$("[id='form:date']").mask("99/99/9999");
$("[id='form:phone']").mask("[phone]");
$("[id='form:tin']").mask("99-9999999");
$("[id='form:ssn']").mask("999-99-9999");

或者，也可以给他们一个类名:

<h:inputText id="date" styleClass="date" />
<h:inputText id="phone" styleClass="phone" />
<h:inputText id="tin" styleClass="tin" />
<h:inputText id="ssn" styleClass="ssn" />

然后可以更一般地按如下方式选择它，而无需摆弄 View 中可能有多个相同类型的输入字段的ID，例如在<h:dataTable>内部:

$("input.date").mask("99/99/9999");
$("input.phone").mask("[phone]");
$("input.tin").mask("99-9999999");
$("input.ssn").mask("999-99-9999");