如何在 JSF 2 + RichFaces 4 的输入字段中使用掩码？答案

【问题标题】：How use mask in input field in JSF 2 + RichFaces 4?如何在 JSF 2 + RichFaces 4 的输入字段中使用掩码？
【发布时间】：2011-12-14 13:24:04
【问题描述】：

我需要在表单的输入字段中添加一些掩码。我尝试插入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("(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>

目前还没有。

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

<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>

有什么想法吗？

【问题讨论】：

标签： jquery jsf jsf-2 richfaces input-mask

【解决方案1】：

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("(999) 999-9999");
$("#form\\:tin").mask("99-9999999");
$("#form\\:ssn").mask("999-99-9999");

或者，无需显式转义：

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

或者，或者，只是给他们一个类名：

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

然后可以更一般地选择如下，而不需要摆弄视图中可能具有相同类型的多个输入字段的 ID，例如在 <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，我按照你的方法帮助我，谢谢老兄。但我试图了解我的数据表生成的 id 以在 jQuery 掩码中使用，你能帮我吗？
啊，它在数据表里面？你可以使用 end-with 选择器 $("[id$=date]")，但是对于现在有多个 CSS 类的情况，使用 CSS 类要好得多（阅读：不容易出错）。
谢谢！使用 $("[id$=date]") 真的解决了我的问题。你说要使用 CSS，但是中没有属性 'class'，不应该是 styleClass 吗？
第一次帮助你，哎呀呀！ ;)（顺便说一句，你有漂亮的孩子，谢谢你的一切）
@BalusC 我试过用你的例子，面具有效，但我的方法在按钮点击时没有被调用，有什么想法吗？

【解决方案2】：

使用 JSF 和 RichFaces 我设法解决了这样的冲突掩码：

var $j = jQuery.noConflict();

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

【讨论】：