Switching input type

by Atty Eleti

HTML

<div id="container">
  <input type="text" id="iban" placeholder="DE00 0000 0000 0000 0000 0000">
</div>

Babel + JSX

let iban = document.getElementById('iban');

const placeholder = 'DE00 0000 0000 0000 0000 0000';

const onKeyUp = (e) => {
	console.log('change', e.target.value);
  
  const oldIban = iban;

  let newType  = oldIban.value.length >= 2 ? 'tel' : 'text';
	if (newType === oldIban.type) {
		return;
  }
  
  iban = document.createElement('input');
  iban.type = newType;
  iban.placeholder = placeholder;
  iban.value = e.target.value;
  iban.addEventListener('keyup', onKeyUp);
  
	oldIban.remove();
  document.getElementById('container').appendChild(iban);
  iban.focus();
  
  console.log(iban);
}

iban.addEventListener('keyup', onKeyUp);