JQuery 屏蔽输入插件不起作用答案

【问题标题】：JQuery Masked Input plugin doesn't workJQuery 屏蔽输入插件不起作用
【发布时间】：2014-03-26 19:40:01
【问题描述】：

我在我的 Web 项目中添加了一个 JQuery Masked Input 插件，但它根本不起作用。

插件可以在这里找到：http://digitalbush.com/projects/masked-input-plugin

我在我的 JSP 中包含了 JQuery 库和 Masked Input 插件，并为我的 html <input> 元素调用了 mask 函数：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- JS --->
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/masked-input-jquery-1.3.1.js"></script>

    <title>Test</title>
</head>
<body>

    <script type="text/javascript">
       $("#name").mask("99/99/9999");

    </script>

    <form id="" method="" action="">
    <div>
       <label for="name">
          Name<b style="color: red">*</b>
       </label>
       <input name="studentName" maxlength="255" autofocus="autofocus" type="text" id="name"/> 
......

当我访问我的 JSP 时，甚至在文本字段中输入任何内容之前，Chrome 控制台上都会显示以下内容：

未捕获的 ReferenceError：未定义 iMask

你能帮帮我吗？代码有什么问题吗？

【问题讨论】：

我认为它不会解决您当前的问题，但是您对 .mask 的调用将不起作用，因为它在解析页面的其余部分之前运行。您需要将调用包装在 jQuery 文档就绪函数中： $(document).ready(function(){... your code here ... });
在 document.ready 中的包装实际上应该可以解决问题。 jQuery 和 mask 插件已经执行，因为它们在头部。但是当你做 $('#name').mask(...) 它什么都不选择。在文档准备好之前调用插件上的 .mask 可能意味着掩码尚未加载它需要的所有内容。即使您没有收到该错误，它仍然无法正常工作，因为您需要 $('#name') 来选择尚未创建的 dom 元素。
@HJ05 您应该将其作为答案发布，以便 OP 接受并投票。

标签： javascript jquery masking

【解决方案1】：

这可能会或可能不会解决您当前的问题，但您对 .mask 的调用将不起作用，因为它会在页面的其余部分（您的输入字段所在的位置）被解析之前运行。

您需要将调用包装在 jQuery 文档就绪函数中：

$('document').ready(function() {
    $("#name").mask("99/99/9999");
});

这告诉脚本等待页面加载到足以让浏览器知道文档中的输入字段。

作为附加注释，最佳实践将所有脚本标签（有一些例外）放在结束正文标签之前。否则，您应该将脚本标签与其余标签一起移动到头部。

【讨论】：

是的，我完成了通话，效果很好！奇怪的是错误消息（“Uncaught ReferenceError: iMask is not defined”）仍然出现在控制台上。但它现在工作正常。谢谢你的朋友。

【解决方案2】：

这是因为 jQuery 已下载但尚未准备好。试试

$(function(){
// your code goes here
});

【讨论】：

【解决方案3】：

正如一些人已经提到的那样，您需要将 jQuery 包装在 document.ready 中。您还需要调整掩码以匹配所需的输入。我假设您只希望允许使用字母字符。 This JSFiddle shows你是一个假设的例子。

如果您想要字母数字，只需将“a”替换为“*”即可。下面是 jQuery 代码：

$(function() {
   //The # of "a"s you enter depends on your max field input
   //The "?" makes any character after the first one optional
   $("#fname").mask("a?aaaaaaaaaaaaaaaaaaaaaaaa"); 
   $("#lname").mask("a?aaaaaaaaaaaaaaaaaaaaaaaa"); 
});

还应该说，使用掩码输入插件可能不是验证名称的最佳选择，因为它适用于固定宽度的输入。如果您想验证不同长度的字母字符，请考虑执行this instead 之类的操作。

【讨论】：

谢谢我的朋友。事实上，我还想使用 JQuery/Javascript 插件来验证输入字段（姓名、日期、电话号码、SSN 等）。你知道一个好的吗？
您使用的插件实际上非常擅长执行日期/电话号码和 SSN，因为它们都是固定宽度。但请查看其中之一：github.com/posabsolute/jQuery-Validation-Engine 或 jqueryvalidation.org