Question

我有几个电话号码字段使用jquery屏蔽来格式化输入。请参阅下面的代码。这些字段很有效，直到上面的组合框更改刷新包含这些字段的面板。一旦刷新，我的屏蔽就会停止工作。

知道为什么以及如何防止这种情况发生？

<xp:scriptBlock id="scriptBlock7">
<xp:this.value><![CDATA[
jQuery(function($){
x$("#{id:dayPhone1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );
x$("#{id:eveningPhone1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );
x$("#{id:cellular1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );

});
]]></xp:this.value>
</xp:scriptBlock>

Answer 1

jQuery只运行一次。它操纵DOM以提供蒙版效果。运行部分刷新后，原始DOM将返回给用户，并且掩码不再有效。

当部分刷新发生时，jQuery代码不知道再次将自身应用回掩码。你有很多选择，但最好的选择可能是：

在部分刷新的onComplete事件中，您可以再次调用掩码代码以重新应用“Mask”。我不知道的是掩码是否会重置字段或尊重其中的值。我就是这样，然后看一下插件代码，看看你有什么选择。

<xp:button value="Label" id="button1" styleClass="startLoginProcess" style="display:none">
        <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="somethingHere"
            onComplete="applyMaskCodeAgainHere">
        </xp:eventHandler>
</xp:button>

要改进上面的代码，因为看起来你正在应用相同的掩码我建议使用类选择器并简化代码看起来更像这样：

<xp:scriptBlock id="scriptBlock7">
<xp:this.value><![CDATA[
    jQuery(function($){
        $('.phoneMask').mask("(999) 999-9999? x 9999999", {placeholder : " " } );   
    });
]]></xp:this.value>
</xp:scriptBlock>

在你的领域放一个styleClass =“phoneMask”：）

Answer 2

您的scriptBlock是否也在正在刷新的面板上？它必须是为了在刷新后将掩码重新应用于字段。

使用JQuery屏蔽输入字段。当我刷新包含这些字段的面板时，屏蔽停止工作

2 个答案: