ASP.NET 上的 Jquery 掩码不起作用答案

【问题标题】：Jquery mask on ASP.NET not workingASP.NET 上的 Jquery 掩码不起作用
【发布时间】：2015-07-28 20:27:51
【问题描述】：

我想使用从http://digitalbush.com/projects/masked-input-plugin/ 获得的面具，但面具无法正常工作。这是我的代码：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="/Scripts/jquery.maskedinput.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery(function ($) {
                $("#cnpjDate").mask("99/99/9999", { placeholder: "dd/mm/yyyy" });
                $("#date").mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
                $("#phone").mask("(999) 999-9999");
                $("#tin").mask("99-9999999");
                $("#ssn").mask("999-99-9999");
            });

        </script>
</asp:Content>

我的输入框是这样的

<input id="cnpjDate" type="text" /></td>

它在一个表内，在一个视图内，在一个 ContentTemplate 内的多视图内，在更新面板内。

我在这里做错了什么？

【问题讨论】：

如果您查看浏览器的控制台并确定呈现的输入具有相同的 id，您会看到任何错误吗？
浏览器没有显示任何错误。渲染的输入是什么？
那是当你运行项目或发布它时，你可以在 devtools 中看到它

标签： javascript c# jquery asp.net

【解决方案1】：

问题是 masked-input-plugin 使用了 jQuery 中的 .on 函数，这在 jQuery 1.4.2 中不可用，您需要更新 jQuery 版本或降级 masked-input-plugin。

还要确保在 dom 加载后运行你的 jQuery 函数：

$( document ).ready(function() {});

这是一个有效的codepen

【讨论】：

【解决方案2】：

由于更新面板是通过 ajax 加载的，因此 Jquery 方法没有绑定到 DOM 元素。要解决此问题，请将方法绑定到更高且不通过 ajax 加载的 dom 元素上。

试试这个脚本：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">       
</asp:Content>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function ($) {
        $('body').on('click','#cnpjDate',function(){
             $(this).mask("99/99/9999", { placeholder: "dd/mm/yyyy" });
        }); 
        $('body').on('click','#date',function(){
             $(this).mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
        }); 
        $('body').on('click','#phone',function(){
             $(this).mask("(999) 999-9999");
        }); 
        $('body').on('click','#tin',function(){
             $(this).mask("99-9999999");
        }); 
        $('body').on('click','#ssn',function(){
             $(this).mask("999-99-9999");
        }); 
    });
</script>

【讨论】：