Блог

Мне нужно иметь несколько масок в полях ввода в моей форме. Я пытаюсь вставить 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>
 

Есть идеи?

JavaScript / jQuery запускается в браузере и работает с деревом HTML DOM, которое генерируется JSF и отправляется в браузер, оно не перехватывается в самом дереве компонентов JSF. Ваш $("#date") ничего не вернет, поскольку в дереве HTML DOM не существует элемента с таким идентификатором. Откройте страницу в своем браузере, щелкните правой кнопкой мыши и просмотрите исходный код. Вы увидите, что на самом деле он был сгенерирован как <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" />
 

который затем можно более обобщенно выбрать следующим образом без необходимости манипулировать идентификаторами, возможно, нескольких полей ввода одного и того же типа в представлении, например, внутри <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");
 

Используя JSF и RichFaces, мне удалось решить конфликтные маски следующим образом:

 var $j = jQuery.noConflict();

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