Css 'const' chars in text input

Question

Is there any way to set 'const' chars to text in css or html? For Example user writes phone number 646830293 and in text (one input) this is 646-830-293 (so every fourth and eighth chars are '-').

Answer 1

I think you cannot do it with pure CSS but it is very simple only using Javascript.

var text = document.getElementById('text').innerHTML;

var output = text.substring(0, 3) + "-" + text.substring(3, 6) + "-" + text.substring(6);

document.getElementById('output').innerHTML = output;

<p id="text">646830293</p>
<p id="output"></p>

Answer 2

jQuery Mask Plugin might the solution for you. It's very simple to use and has very good customization.

From the documentation, you'd write a simple mask with:

$(document).ready(function(){
  $('.date').mask('00/00/0000');
  $('.time').mask('00:00:00');
  $('.date_time').mask('00/00/0000 00:00:00');
});

The whole page has a lot more examples!

Using your pastebin, here's the result: