Question

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

可以在此处找到该插件： http://digitalbush.com/projects/masked-input-plugin

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

<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

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

Answer 1

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

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

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

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

作为附加评论，最佳做法是将所有脚本标记（有一些例外）放在结束标记之前。否则，您应该将脚本标记移动到包含其余标记的头部。

Answer 2

那是因为jQuery已经下载但尚未准备好。尝试

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

Answer 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 Masked Input插件不起作用

3 个答案: