How to removable digits in the format phone number after XX-XXX XXXX format when it is not able to remove some numbers?

Question

I've coded the format number phone but it cannot removable some digits. I cannot handle it. Can you please help me?

<paper-input id="email" name="email_address" class="email" label="Email"  type="email" error-message="Please enter valid email format" required auto-validate></paper-input>


const isModifierKey = (event) => {
            const key = event.keyCode;
            return (event.shiftKey === true || key === 35 || key === 36) || (key === 8 || key === 9 || key === 13 || key === 46) || (key > 36 && key < 41) || ((event.ctrlKey === true || event.metaKey === true) && (key === 65 || key === 67 || key === 88 || key === 90))
        };

        const isNumericInput = (event) => {
            const key = event.keyCode;
            return ((key >= 48 && key <= 57) || // Allow number line
                (key >= 96 && key <= 105) // Allow number pad
            );
        };

        const enforceFormat = (event) => {
            if (!isNumericInput(event) && !isModifierKey(event)) {
                event.preventDefault();
            }
        };

        const formatToPhone = (event) => {
            if (isModifierKey(event)) {
                return;
            }

            const target = event.target;
            const input = event.target.value.replace(/\D/g, '').substring(0,11);
            const zip = input.substring(0,2);
            const middle = input.substring(2,5);
            const last = input.substring(5,11);

            if(input.length > 5) {
                target.value = `${zip}-${middle} ${last}`;
            } else if (input.length > 1) {
                target.value = `${zip}-${middle}`;
            } else if (input.length > 0) {
                target.value = `${zip}-`;
            }
        };

        const inputElement = this.$.phone;
        inputElement.addEventListener('keydown', enforceFormat);
        inputElement.addEventListener('keyup', formatToPhone);

I expect to remove digits for replacing the new number. How to handle the removable digits in the format phone number. Polymer 3.0 is used for here.

Answer 1

In the Polymer 3.0, I've fixed it.

static get template(){
  return html`
  <paper-input id="phone" name="mobilephone_no" allowed-pattern= "[0-9]" country-code="" placeholder="XX-XXX XXXX" maxlength="9" required>

  `
}

ready(){
super.ready();
        this.$.phone.addEventListener('keyup', function(e) {
            var ph = this.value.replace(/\D/g,'').substring(0,9);
            var deleteKey = (e.keyCode == 8 || e.keyCode == 46);
            var len = ph.length;
            if(len==0){
                ph=ph;
            }else if(len<2){
                ph= ph;
            }else if(len==2){
                ph = ph + (deleteKey ? '' : '');
            }else if(len<5){
                ph= ph.substring(0,2)+'-'+ph.substring(2,5);
            }else if(len==5){
                ph= ph.substring(0,2)+'-'+ph.substring(2,5)+ (deleteKey ? '' : '');
            }else{
                ph= ph.substring(0,2)+'-'+ph.substring(2,5)+' '+ph.substring(5,9) + (deleteKey ? '' : '');
            }
            this.value = ph;
        });

        this.$.phone.addEventListener('keydown', function(e) {
            var ph = this.value.replace(/\D/g,'').substring(0,9);
            var deleteKey = (e.keyCode == 8 || e.keyCode == 46);
            var len = ph.length;
            if(len < 9){
                ph=ph;
            }else if(len<2){
                ph= ph;
            }else if(len==2){
                ph = ph + (deleteKey ? '' : '-');
            }else if(len<5){
                ph= ph.substring(0,2)+'-'+ph.substring(2,5);
            }else if(len == 5){
                ph= ph.substring(0,2)+'-'+ph.substring(2,5) + (deleteKey ? '' : '');
            }else{
                ph= ph.substring(0,2)+'-'+ph.substring(2,5) +' '+ph.substring(5,9) + (deleteKey ? '' : '');
            }
            this.value = ph;
        });
}