我需要在单击超链接后在InputText字段中显示掩码,以便在我的FORM中编辑信息。当我第一次访问表单时,输入文本字段正确显示掩码。
关注我的代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<label for="inputcpf">CPF</label>
<h:inputText class="form-control" required="false" value="#{clienteBean.cliente.cpf}" id="inputcpf" requiredMessage="Informe o CPF do cliente." pl:placeholder="Informe o CPF" />
<script type="text/javascript">
$("#inputcpf").mask("999.999.999-99");
</script>
和EDIT部分代码:
<p:column style="width:260px;" headerText="Nome" >
<f:ajax event="click" execute="@this" render="@form" listener="#{clienteBean.preparaAlteracao}">
<h:commandLink value="#{dados.nome}">
<f:param name="id" value="#{dados.id}" />
</h:commandLink>
</f:ajax>
</p:column>
单击链接后,数据将加载到字段中,但带掩码的字段不会显示掩码
只要您对输入进行聚焦,就会显示遮罩。您可能将输入嵌入到h:form
中,如下所示:
<h:form id="myForm">
<h:inputText ... id="inputcpf" .../>
</h:form>
form id
被添加到客户端html中呈现的input id
:
<input id="myForm:inputcpf" ...>
因此,您的jQuery选择器应如下所示:
$("#myForm\\:inputcpf")
您可以在How can I know the id of a JSF component so I can use in Javascript中找到有关客户端ID的更多信息。如果您的客户端ID不包含父表单的id作为前缀(或任何其他NamingContainer),那么您很可能正在使用prependId="false"
,应该防止因UIForm with prependId="false" breaks <f:ajax render>中描述的原因而使用<p:inputMask/>
但在您的情况下获得屏蔽输入的最简单和最稳定的方法是使用PrimeFaces组件script
。使用当前方法,一旦使用AJAX更新输入,掩码就会丢失。你还必须更新mask
元素,以便再次执行input
函数,并在更新的 <h:form id="form">
<h:inputHidden value="#{userBean.user.id}" />
<p:inputText required="true" value="#{userBean.user.name}" id="inputName" />
<p:inputMask mask="(99)99999-9999" value="#{userBean.user.phone}" id="inputPhone" >
<p:keyFilter regEx="/[a-z0-9_]/i"/>
</p:inputMask>
<p:commandButton value="Save" update="@form" process="@form" actionListener="#{userBean.saveUser}" />
上有一个掩码。
我通过primefaces代码更改我的代码。跟随 !
<p:dataTable id="list_users" var="dados" value="#{userBean.allUsers}">
<p:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{dados.id}" />
</p:column>
<p:column>
<f:facet name="header">Name</f:facet>
<h:outputText value="#{dados.name}" />
</p:column>
<p:column headerText="Ação">
<f:facet name="header">Ação</f:facet>
<f:ajax event="click" render="@form" listener="#{userBean.editUser}">
<h:commandLink>
<f:param name="id" value="#{dados.id}" />
<h:outputText value="edit" />
</h:commandLink>
</f:ajax>
</p:column>
</dataTable>
我保存用户并刷新所有页面...新用户插入数据表列表中。然后我有所有用户的dataTable ......
下一步我需要单击编辑链接以编辑信息...此时数据将填充在字段中,但字段在输入字段中丢失了de mask。
qazxswpoi