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.

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.

remove the space from the ID and then try this

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

Josh Mein

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