custom input field: formatted phone number

doesn't get included in form.elements

by JakobJingleheimer

HTML

<form name="test">
  <input-phone-number
    format="(###) ###-####"
    value="5555555555"
    ></input-phone-number>
  <button type="submit">Submit</button>
</form>

JavaScript

class InputPhoneNumber extends HTMLElement {
	constructor(...args) {
  	super(...args);
    
    console.log(...args);
    
    const format = this.getAttribute('format');
    const value = this.getAttribute('value');
    const formattedValue = this.formatNumber(format, value);
    
    const shadow = this.attachShadow({ mode: 'open' });
    
    const input = document.createElement('input');
    const style = document.createElement('style');
    
    style.textContent = this.style;
    
    const container = document.createElement('div');
    
    container.classList.add('container');
    container.contentEditable = true;
    container.textContent = formattedValue;
    
    container.addEventListener('input', ({ target }) => input.value = target.textContent);
    
    input.setAttribute('type', 'tel');
    input.setAttribute('value', value);
    
    shadow.appendChild(style);
    shadow.appendChild(container);
    shadow.appendChild(input);
  }
  
  formatNumber(format, value) {
  	let output = '';
  	for (
    	let f = format.length - 1,
      	  v = value.length - 1;
      f > -1;
      f--
    ) {
    	const char = format[f];
      const num = value[v];
      if (char === '#') {
      	output = `${num}${output}`;
        v--;
      } else {
      	output = `${char}${output}`;
      }
    }
  	
    return output;
  }
  
  style = `
  	.container {
    	border: 1px solid black;
      border-radius: 2%;
      padding: 0.5em;
    }
    
  	input {
    	display: none;
    }
  `;
}

customElements.define('input-phone-number', InputPhoneNumber);

document.forms.test.addEventListener('submit', (e) => {
	e.preventDefault();
	console.log(e.target.elements);
});