When a user focuses on an input I want to show them the input mask like this

And when they start typing I want the mash still be showing like this

But I have no idea how to implement this. I tried to find something similar on codepen or other websites. But I only found solutions where the mask disappers when a user starts typing.

As I can see the mask is not a part of the typed number (I mean the mask is not concatenated to the input text). Also the mask disappears on blur

How can I implement this with pure JavaScript? Maybe provide a link to some article/video with explanation?

CodePudding user response：

Heres is a proposal solution using a text mask: https://codepen.io/aSH-uncover/pen/VwXEvLb

The idea is to split the input in several chuncks of 2 digits so that we can apply a mask easily on each splitted part. This raises some tricky eventing management depending how you want the control to behave ; what I propose here is only an example, surely not some production ready code ;)

First an HTML file with a minimal scenario (4 digit phone number :D)

<div>
  <label>Phone number</label>
</div>
<div class='container'>
  <div class='group'>
    <input id='input1' maxlength ='2' placeholder='01' />
    <label id='mask1' class='mask' />
  </div>
  <div class='group'>
    <input id='input2' maxlength ='2' placeholder='23' />
    <label id='mask2' class='mask' />
  </div>
</div>

Then some styling

.group {
  position: relative;
  display: inline-flex;
  height: 15px;
  width: 15px;
}
input {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0%;
  pointer-events: none;
  border-bottom-color: grey;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

Finaly pure javascript eventing

const input1 = document.querySelector('#input1');
const mask1 = document.querySelector('#mask1');
const input2 = document.querySelector('#input2');
const mask2 = document.querySelector('#mask2');

let nextBackspaceSuppr = false

input1.addEventListener('keyup', onUp1);
input1.addEventListener('focus', onFocus1);
input2.addEventListener('keydown', onDown2);
input2.addEventListener('keyup', onUp2);
input2.addEventListener('focus', onFocus2);

function onUp1 (oEvent) {
  switch (oEvent.target.value.length) {
    case 0: {
      mask1.style.width = '0%'
      input2.placeholder = '23'
      mask2.style.width = '100%'
      break;
    }
    case 1: {
      input2.placeholder = ''
      mask1.style.width = '50%'
      mask2.style.width = '100%'
      break;
    }
    default: {
      input2.placeholder = ''
      mask1.style.width = '0%'
      mask2.style.width = '100%'
      input2.focus()
      break;
    }
  }
}

function onFocus1 (oEvent) {
  if (input1.value.length > 1) {
    input2.focus()
  }
}

function onDown2 (oEvent) {
  if (oEvent.target.value.length === 0 && oEvent.key === 'Backspace') {
    nextBackspaceSuppr = true
  }
}

function onUp2 (oEvent) {
  switch (oEvent.target.value.length) {
    case 0: {
      mask2.style.width = '100%'
      if (oEvent.key === 'Backspace') {
        if (nextBackspaceSuppr) {
          input1.value = input1.value.substr(0, 1)  
        }
        input1.focus()
      }
      break;
    }
    case 1: {
      mask2.style.width = '50%'
      break;
    }
    default: {
      mask2.style.width = '0%'
      input2.focus()
      break;
    }
  }
  nextBackspaceSuppr = false
}

function onFocus2 (oEvent) {
  if (input1.value.length < 2) {
    input1.focus()
  }
}

CodePudding user response：

why did you put it in css catagory?

document.getElementById("body").style.position =  "fixed";
   const canvass = document.getElementById('canvas');
   const ctx = canvass.getContext('2d')
   var number = "2"
   var pressed =0
   //pressed should be 1 if it is pressed
   var thefullnum=number "2302"
   if(!pressed){
    ctx.globalAlpha= 0.3;
    ctx.fillText(thefullnum,50,50);
    ctx.globalAlpha= 1;
    ctx.fillText(number,50,50);}else{
    //when its pressed
    ctx.fillText("__-__-__",50,50);
   
    ctx.fillStyle="white"
    ctx.fillRect(number.length,20,50,50)
    ctx.fillStyle="black"
    ctx.fillText(number,50,50);}