【问题标题】:Why is my jquery input mask not working?为什么我的 jquery 输入掩码不起作用?
【发布时间】:2012-09-07 20:16:44
【问题描述】:

我正在尝试使用 jQuery 输入掩码插件 (jquery.maskedinput-1.3.min.js),我搜索了几个示例/解决方案,我的代码与其他工作示例完全相同,但它只是不会为我工作。请记住,我的代码现在只是测试这个插件(试图让它工作,这将解释为什么我试图将日期输入掩码应用于名称字段)我的代码如下:

HTML

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Persons of Interest</title>
    <link rel="stylesheet" type="text/css" href="/Default_Styler.css" />
    <link rel="shortcut icon" href="/person.ico" type="image/x-icon" />
    <script src="/Scripts/jquery.1.7.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.maskedinput-1.3.min.js" type="text/javascript"></script>
    <script src="/Scripts/FormHandler.js" type="text/javascript"></script>
</head>
<body>
    <div id="WrapperDiv">
        <div id="TitleBar">    <!--Beginning of Title Bar-->
            <div style="padding-top: 30px; text-align: center;">Persons of Interest</div>
        </div>                 <!--End of Title Bar-->
        <div id="FormHolder">
            <form action="">
                <p><label>POI Name: </label><input type="text" id="POI Name" name="POI Name" value=""/></p>
            </form>
        </div>
    </div>
</body>
</html>

JavaScript

jQuery(function ($) {
    $("#POI Name").mask("99/99/9999");
});

除此之外,我可以向您保证,引用的 jQuery 库确实在 相应的目录。 (/脚本/...)

当我单击输入字段或任何内容时,我没有收到错误消息,它只是什么都不做。

【问题讨论】:

  • 不是一个答案,因为我真的同意你应该从你的id 中删除空间,但为了好奇,这应该可以工作(逃避空间):$("#POI\\ Name")jsfiddle.net/xA8GY/1

标签: jquery forms input mask


【解决方案1】:

jQuery 选择器遵循标准的 CSS 语法,因此 ID 中间的空格实际上被视为后代选择器。让您的生活更轻松:在处理 jQuery 时,将您的 ID 和类限制为字母数字、连字符等等。

澄清一下:jQuery 中有一个引号/转义语法,但恕我直言,处理起来太烦人了,因此我什至没有给出它的示例。

【讨论】:

  • 天啊,我得停止在我的代码中添加空格...非常感谢!您的回答正是它不起作用的原因。从现在开始,老实说帕斯卡和骆驼案......
【解决方案2】:

去掉ID中的空格,然后试试这个

jQuery(function ($) {
    $("#POIName").mask("99/99/9999");
});

【讨论】:

    【解决方案3】:

    空格在 ID 属性中无效。您应该将您的 id 更改为 $("#POIName") 并更新您的 html。

    Jquery-ids-with-spaces 是一个类似的问题,您可能会觉得很有趣。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多