Why is my jquery input mask not working?

问题

I am trying to use the jQuery input mask plug-in (jquery.maskedinput-1.3.min.js), and I have searched for several examples/solutions, and my code is exactly as other working examples, but it simply won't work for me. Keep in mind my code is only testing this plug-in for now (trying to get it to work, which will explain why I am trying to apply a date input mask to a name field) My code lies below:

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");
});

Other than that, I can assure you that the referenced jQuery libraries are indeed in the appropriate directory. (/Scripts/...)

I don't get an error when I click in the input field or anything, it just simply does nothing.

回答1:

jQuery selectors follow the standard CSS syntax, so the space in the middle of your ID is actually being treated as a descendant selector. Make your life easier: when dealing with jQuery, keep your IDs and classes limited to alphanumerics, hyphen and that's about it.

To clarify: there is a quote/escape syntax in jQuery, but IMHO it's too annoying to deal with, hence I'm not even giving an example of it.

回答2:

remove the space from the ID and then try this

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

回答3:

Spaces are not valid in ID attributes. You should change your id to $("#POIName") and update your html as well.

Jquery-ids-with-spaces is a similar question that you may find intersting.

来源：https://stackoverflow.com/questions/12324800/why-is-my-jquery-input-mask-not-working

标签

jquery

forms

input

mask