Replace symbols not working on keypress event

Question

I have input where I need to delete non number symbols

Here is html of component

  <input
  type="text"
  tabindex="0"
  class="search__input form-control-md + {{ class }}"
  [value]="config.value"
  [required]="config.required"
  [attr.maxlength]="config.maxLength"
  [attr.minLength]="config.minLength"
  (focusout)="onFocusOut($event)"
  (input)="onValueChange($event)"
  (keypress)="onValueChange($event)"
  (keyup.enter)="onEnter($event)"
  #inputElem
/>

Here is component

    export class TextFieldComponent implements OnInit, ControlValueAccessor {
  @Input() config: FormBase<string>;
  @Input() form: FormGroup;
  @Output() onChanged = new EventEmitter<boolean>();
  @Input() class: string;
  configControl = new FormControl();
  @Input() set value(value: string) {
    this._value = value;
  }
  get value(): string {
    return this._value;
  }

  private _value: string;

  constructor() {}

  ngOnInit() {}

  onFocusOut(event) {
    this.onValueChange(event);
    this.onChanged.emit(true);
  }

  onEnter(event) {
    this.onValueChange(event);
    this.onChanged.emit(true);
  }

  onValueChange(event) {
    this.changeValue(event.target.value);
  }

  writeValue(value) {
    this.value = value;
  }

  changeValue(value) {
    if (this.value === value) {
      return;
    }
    this.value = value;
    let result;
    switch (this.config.isNumber) {
      case true:
        result = value != null ? value.toString().replace(/[^0-9]/g, "") : null;
        console.log(result);
        this.onChange(result);
        break;
      default:
        this.onChange(value);
    }
  }

  onChange: any = () => {};

  onTouched: any = () => {};

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }
}

My problem, that on focusout for example, this method changeValue is working well and it delete non number symbols, but on keypress event I see that on console I have replaced value, but on input, I still see letters. How I can solve this issue?

score 0 · Answer 1 · answered Oct 15 '21 at 09:29

You need to understand what exactly keypress is doing here. The keypress event is fired when a key that produces a character value is pressed down and examples of keys that produce a character value are alphabetic, numeric, and punctuation keys.

Examples of keys that don't produce a character value are modifier keys such as Alt, Shift, Ctrl, or Meta.

In the above case the keypress event won't invoke and will only be called when the character values are produced.

You should use keyUp or keyDown event to track things more effectively.

Note: check this link for the difference b/w keyup, keydown and keypress.

score 0 · Answer 2 · answered Oct 15 '21 at 10:35

In your component access input element using ViewChild

@ViewChild('inputElem') inputEl: ElementRef;

Then to set result after replace

result = value != null ? value.toString().replace(/[^0-9]/g, '') : null;

// update input value
this.inputEl.nativeElement.value = result;

console.log(result);

Demo

Replace symbols not working on keypress event

2 Answers2