htmljquerymaskedinput

jQuery Mask Plugin Changing Characters to Minus Sign

I have the following program for the jQuery Mask plugin:

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"
   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
   crossorigin="anonymous"></script>
   <script src="./scripts/jquery.mask.js"></script>
   <script>
      // https://learn.jquery.com/using-jquery-core/document-ready/
      $(document).ready(
         function () {
            $("#ssnId").mask("999-99-9999");
         }
      );
   </script>
</head>
<body>
   SSN:<br />
   <input type="text" id="ssnId" name="ssn" />
</body>
</html>

When I blank out the SSN text field and type in a test pattern such as
33y
33=
33(
33+
or
33G
the last character gets changed to a minus and
33--
becomes the output.
(Notice that there are two minuses in the final output)

Is there some way I can get the jQuery Mask plugin to stop changing the last character of my test patterns to "--"?

NOTES:

  1. I'm using v1.7.7 of the jQuery Mask plugin found at https://plugins.jquery.com/mask/
  2. Please abstain from lecturing on best security practices for processing PII and SSN data since I'm only using SSN as an example.
Solution

  • Try making your mask use # instead of 9

    $("#ssnId").mask("###-##-####");

    And also add maxlength to the input tag:

    <input type="text" id="ssnId" name="ssn" maxlength="11" />


    <!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"
   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
   crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin@1.14.16/dist/jquery.mask.min.js"></script>
   <script>
      // https://learn.jquery.com/using-jquery-core/document-ready/
      $(document).ready(
         function () {
            $("#ssnId").mask("###-##-####");
         }
      );
   </script>
</head>
<body>
   SSN:<br />
   <input type="text" id="ssnId" name="ssn" maxlength="11" />
</body>
</html>