JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div contenteditable data-mask="DD/MM/YYYY" id=div1></div>

CSS

div {
  color: black;
}

div:after {
  content: attr(data-mask);
  color: gray;
}

JavaScript

document.getElementById('div1').addEventListener('input', function(e) {
 let len = this.innerText.length;

  if (len === 2 || len === 5) {
    this.innerText += '/'
    len++
  }
  this.setAttribute('data-mask', 'DD/MM/YYYY'.slice(len))
  window.getSelection().collapse(this.lastChild, len)
}, false)