Backspace doesn't work in Firefox Angular 2

Question

I have an input field (type text) and I have to avoid to introduce there any character no numeric in there. Also, the field is limited to 4 numbers (is a year field). When I got it, the field don't allow to use the backspace or delete key from the keyboard.

I tried several solutions from this page but none of them work for me.

I think the problem is related with the limitation of the field for only number, because if I remove this option the keys backspace and delete works fine!

The .html is:

<tab heading="{{'Ressources du Foyer' | uppercase}}" [disabled]="!isEdit || !isODP">
                <table [defaultElemPerPage]="999" [data]="dataRessources" [config]="configRessources" [columns]="columnsRessources"
                    [showElementsPerPageSet]="false" [showItemNumberInfo]="false" [doHover]="false" [doClick]="false" [showActionsHeader]="!modeConsultation">
                    <template let-data>
                        <p class="text-center" *ngIf=!modeConsultation>
                            <a (click)="addRowLineRessources(data.index)" class="purple-icon" *ngIf="data.last" title="Ajouter une ligne"><span class="glyphicon glyphicon-plus"></span></a>
                            <a (click)="removeRowLineRessources(data.index)" title="Supprimer une ligne"><span class="purple-icon glyphicon glyphicon-trash"></span></a>
                        </p>
                    </template>
                </table>
            </tab>

The file .ts:

anneeReference: this.createStandardComponentService.createInputText({
        id: 'anneeReference',
        type: 'text',
        disabled: false,
        group: group.get('anneeReference'),
        errors: this.errors.anneeReference,
        outputMethod: this.validYear,
        maxlength: 4
      }),

validYear(event: any) {
    const pattern = Constants.NUMBERS_PATTERN;
    const codeCle = event.keyCode;
    const inputChar = String.fromCharCode(event.charCode);
    if (!pattern.test(inputChar) && (codeCle !== Constants.BACKSPACE_TOUCHE || codeCle !== Constants.DELETE_TOUCHE)) {
      event.preventDefault();
    }
  }

I expected to have a field with max 4 characters, only numbers, where I can erase any change in any moment.

Answer 1

I solve this error by another solution, removing the filter that forbids us add any character non numeric (before accepted by the client, 'cause it's a modification of the specifications given).

Be that as it may, could be another solution into the Mozilla Forum.