This answer assumes you want the following format: (000) 000-0000 (as the OP states).
There are multiple ways to implement this, but here are a couple different approaches:
If you want to simply mask the number on the blur event (when the field loses focus), then you could use the following:
document.getElementById('phone').addEventListener('blur', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
e.target.value="(" + x[1] + ') ' + x[2] + '-' + x[3];
});<p>Masked on the blur event (remove focus).</p>
<input type="text" id="phone" placeholder="(555) 555-5555"/>Alternatively, if you would rather mask the number while typing, you can listen to the input event and then conditionally mask the number based on the regex match:
document.getElementById('phone').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] : '');
});<input type="text" id="phone" placeholder="(555) 555-5555"/>