I implemented something similar in one of my initial projects, hope this helps. I added a script tag in my input element (a component) and set its value to the value of a custom attribute "script" (so I could pass in a string from the outside). Then when I use the component, I pass in this string (code) to the attribute document.getElementById('contact-phone-1').addEventListener('input', function (e) { var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/); e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? ' ' + x[3] : ''); }); I don't know regex so I had to look up the pattern, but this gives me the "(555) 666 1234" format. I presume you could replace the regex patter for the format you'd like and it should work. In the input component, I also added an attribute called "type" and set it to "tel" and an attribute called "id" and and also set this value from outside the component, i.e. from the instance. As you can see the script looks for an element called contact-phone-1 so you'll need to set your input element's id to that.
.jpeg/public)