Skip to content

Instantly share code, notes, and snippets.

@r17x
Last active May 9, 2018 08:00
Show Gist options
  • Select an option

  • Save r17x/fa97badfbcccbdf8bd072676e3224157 to your computer and use it in GitHub Desktop.

Select an option

Save r17x/fa97badfbcccbdf8bd072676e3224157 to your computer and use it in GitHub Desktop.

Example input Mask With Regex

Index.html

<html>
  <head>
  <title>Input Mask Regex</title>
    <style>
    .shell {
        position: relative;
        line-height: 1; 
    }
    .shell span {
        position: absolute;
        left: 3px;
        top: 1px;
        color: #ccc;
        pointer-events: none;
        z-index: -1; 
    }
    .shell span i {
        font-style: normal;
        /* any of these 3 will work */
        color: transparent;
        opacity: 0;
        visibility: hidden; 
        }

    input.masked,
    .shell span {
        font-size: 16px;
        font-family: monospace;
        padding-right: 10px;
        background-color: transparent;
        text-transform: uppercase;
     }
    </style>
  </head>
  <body>
  <form method="POST">
  <label for="mask-input">Format Number 00XXXXXXXX</label>
    <input 
           id="mask-input"
           type="text" 
           class="masked" 
           placeholder="XXXXXXXXXX" 
           pattern="[0-0][0-0][1-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]" 
           data-valid-example="0012344569"
    />
  </form>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>
  </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment