MASK FORMAT IN HTML FORM

Question

This is the current form:

<form>  
    Telephone:
    <input type="text" name="telephone">
</form>

I want to set a mask for this input so that it will have a mask like xx-xx-xx.

Possible duplicate of [How to implement an input with a mask](https://stackoverflow.com/questions/12578507/how-to-implement-an-input-with-a-mask) — Ray, May 26 '17 at 00:15

score 1 · Answer 1 · answered May 25 '17 at 21:35

you may try this :

<html>
<body>
<head>
<style>
input {
  font-family: monospace;
}
label {
  display: block;
}
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; }
</style>
</head>
<html>
<body>
<form action=""> 
  <div>
    <label for="phn">Phone number</label>
    <input id="phn" name="telephone" placeholder="XX - XX - XX" pattern="\w\d\w \d\w\d" class="masked" />
  </div>

</form>

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>

</body>
</html>

score 0 · Answer 2 · answered May 25 '17 at 20:15

0

You could use a place holder in HTML.

<form>  
    Telephone:
    <input type="text" name="telephone" placeholder="xx-xx-xx">
</form>

However, when the user starts typing, it will have the placeholder disappear.

answered May 25 '17 at 20:15

jkeys

431
3
10

It does not work .the placeholder you are talking about does not display the value in the desired format on the screen. I am talking about mask format pattern – Gneto Dominique Page Home May 25 '17 at 20:38

MASK FORMAT IN HTML FORM

2 Answers2