[英]How use mask in input field in JSF 2 + RichFaces 4?
我需要在表单的输入字段中添加一些掩码。 我尝试插入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");
更新更新 $("[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在浏览器中运行,并且在由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");
使用JSF和RichFaces我设法解决了这样的冲突掩码:
var $j = jQuery.noConflict();
window.onload = function () {
$j(#{rich:element('parProcecessoNumProtocolo')}).mask('9999.999999/9999-99');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.