This is called Input masking. This is a simple code with which you can mask the input without jQuery or any other plugin. The JS file takes very less space compared to other plugins. Refer here for more details.
input,input:hover,input:focus{
font-family: monospace;
border-width:0px;
border:none;
width:60px;
outline: none;
}
label {
display: inline;
}
div {
margin: 0 0 1rem 0;
}
.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; }<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>
<label for="cc">Expiry Date:</label>
<input id="cc" type="text" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])/(1[5-9]|2d)" data-valid-example="05/18"/>