那么输入文本在编辑信息时丢失了掩码，这是怎么回事？

Posted 2023-05-08

【中文标题】那么输入文本在编辑信息时丢失了掩码，这是怎么回事？

【英文标题】：Then Inputtext lost mask when Edit information, what´s wrong?

【发布时间】：2019-08-13 21:49:09

【问题描述】：

在我的表单中单击 hiperlink 后，我需要在 InputText 字段中显示掩码以编辑信息。 当我第一次访问表单时，inputext 字段会正确显示我的掩码。

按照我的代码：

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

还有代码的编辑部分：

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

点击链接后，数据被加载到字段中，但带有掩码的字段不显示掩码

【问题讨论】：

是否改为显示占位符Informe o CPF？

【参考方案1】：

一旦您聚焦输入，就会显示掩码。 您可能将输入嵌入到 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> 中描述的原因，应该禁止使用它

但在您的情况下，获得屏蔽输入的最简单、最稳定的方法是使用 PrimeFaces 组件<p:inputMask/>。使用您当前的方法，一旦您使用 AJAX 更新输入，掩码就会丢失。您还必须更新 script 元素才能再次执行 mask 函数并在更新后的 input 上使用掩码。

【参考方案2】：

我通过 primefaces 代码更改我的代码。关注！

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

我保存用户并刷新所有页面...新用户插入数据表列表。 然后我有所有用户的数据表......

下一步我需要点击编辑链接以编辑信息...此时数据填充在字段中，但输入字段中的字段丢失了掩码。

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