如何在JSF 2 + RichFaces 4的输入字段中使用mask? [英] How use mask in input field in JSF 2 + RichFaces 4?

问题描述

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

I need to have some masks in my input fields in my form. I try to insert the jQuery.js and jQuery.MaskedInput.js as show in the code below:

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

到目前为止什么也没买.

BUt nothing so far.

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

UPDATE With BalusC $("[id='form:phone']").mask("(99) 9999-9999"); it works fine! (thanks dude). But I need apply this mask in a datatable :

<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">生成的.

JavaScript/jQuery runs in browser and works on the HTML DOM tree which is generated by JSF and sent to the browser, it does not intercept on the JSF component tree itself. Your $("#date") will return nothing as there exist no element with that ID in the HTML DOM tree. Open the page in your browser, rightclick and View Source. You'll see that it's actually been generated as <input id="form:date">, not as <input id="date">.

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

You should instead use the following selectors (note that : is an illegal character in CSS and should thus be escaped):

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

或者，或者给他们一个类名:

Or, alternatively, just give them a 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" />

然后

可以如下更一般地选择，而无需摆弄视图中相同类型的可能多个输入字段的ID，例如在<h:dataTable>内:

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

这篇关于如何在JSF 2 + RichFaces 4的输入字段中使用mask?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！