Angular | Automatically focus next input on max length

Question

I am trying to come up with a nicer way to be able to focus the next input on Angular without having to manually enter what input I want to focus.

This is my html that I currently have...

As you can see I have a key up event which I pass what I want to focus on whether the input is inputted.

This is the typescript markup...

onDigitInput(event: any, previousElement: any, nextElement: any): void {
    if (event.code !== 'Backspace' && nextElement !== null) {
        nextElement.focus();
    }

    if (event.code === 'Backspace' && previousElement !== null) {
        previousElement.focus();
        previousElement.value = '';
    }
}

I was wondering if there is any way to do this with a directive or just something a bit nicer than what this is now?

user_2636938 · Answer

Change your input element to this:

and then change your function implementation to this:

onDigitInput(event){

   let element;
   if (event.code !== 'Backspace')
        element = event.srcElement.nextElementSibling;

    if (event.code === 'Backspace')
        element = event.srcElement.previousElementSibling;

    if(element == null)
        return;
    else
        element.focus();
}

Results in much cleaner code.

Works with this code:

user_5952193 · Answer

 ngOnInit(): void {
    this.verifyCode = this.formBuilder.group({
      code1: ['', Validators.required],
      code2: ['', Validators.required],
      code3: ['', Validators.required],
      code4: ['', Validators.required],
    });
    }
  nextStep(event, step: number): void {
    if (this.verifyCode.valid) {
      this.onSubmit()
    }
    const prevElement = document.getElementById('code' + (step - 1));
    const nextElement = document.getElementById('code' + (step + 1));
    console.log(event)
    if (event.code == 'Backspace' && event.target.value === '') {
      event.target.parentElement.parentElement.children[step - 2 > 0 ? step - 2 : 0].children[0].value = ''
      if (prevElement) {
        prevElement.focus()
        return
      }
    } else {
      if (nextElement) {
        nextElement.focus()
        return
      } else {

      }
    }


  }

  paste(event) {
    let clipboardData = event.clipboardData;
    let pastedText = clipboardData.getData('text');
    this.verifyCode.setValue({
      code1: pastedText.charAt(0),
      code2: pastedText.charAt(1),
      code3: pastedText.charAt(2),
      code4: pastedText.charAt(3)
    });
    this.onSubmit()
    debugger
  }

  focused(step) {
    if (step === 2) {
      if (this.verifyCode.controls.code1.value === '') {
        document.getElementById('code1').focus();
      }
    }
    if (step === 3) {
      if (this.verifyCode.controls.code1.value === '' || this.verifyCode.controls.code2.value === '') {
        document.getElementById('code2').focus();
      }
    }

    if (step === 4) {
      if (this.verifyCode.controls.code1.value === '' || this.verifyCode.controls.code2.value === '' || this.verifyCode.controls.code3.value === '') {
        document.getElementById('code3').focus();
      }
    }
  }
  
    onSubmit(): void {
    this.submitted = true;
    if (this.verifyCode.invalid) {
      return;
    }
    // ...
    }

user_1783157 · Answer

Here I have used a host listener to capture the keyboard events and a custom directive to handle the focus.

focus.directive.ts

This has an Input variable which is a type of EventEmitter which accepts a string parameter. That parameter will hold the element id to be focused.

import { Directive, EventEmitter, Input, OnInit, Renderer2 } from '@angular/core';

@Directive({
 selector: '[appFocus]'
})
export class FocusDirective implements OnInit {
@Input('appFocus') eventEmitter: EventEmitter;

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
   this.eventEmitter.subscribe(elementId => {
    try {
     this.renderer.selectRootElement(elementId).focus();
    } catch (ex) {
     // If the element doesn't exist or if the element disappears when this called then no need to do anything
    }
   });
  }
}

inputs.component.ts

import { Component, HostListener, EventEmitter } from '@angular/core';

@Component({
 selector: 'app-inputs',
 templateUrl: './inputs.component.html'
})

export class InputsComponent {
  inputFocusEmitter = new EventEmitter();

  @HostListener('window:keydown', ['$event'])
  HandlKeyEvents(event) {
   const key = event.key.toLocaleLowerCase();
   const inputIds = ['digitOne', 'digitTwo', 'digitThree'];
   let elementId = '';

   switch (key) {
    case 'backspace':
     elementId = event.target.id;
     const prevInputIndex = inputIds.indexOf(elementId) - 1;
     if (prevInputIndex >= 0) {
      this.inputFocusEmitter.emit(`#${inputIds[prevInputIndex]}`);
     }
     break;

   default:
    elementId = event.target.id;
    const index = inputIds.indexOf(elementId);
    const nextInputIndex = index + 1;
    if (nextInputIndex > 0 && nextInputIndex < inputIds.length) {
     this.inputFocusEmitter.emit(`#${inputIds[nextInputIndex]}`);
    }
    break;
  }
}

inputs.component.html

Here the focus directive is bound with each input elements

Hope this will help.

user_6173350 · Answer

I have used jquery, things are simpler this way and less error prone.

move-focus-to-next.directive.ts

import { Directive, HostListener } from '@angular/core';
import * as $ from 'jquery';

@Directive({
    selector: '[moveFocusToNext]'
})
export class MoveFocusToNext {
    @HostListener('input', ['$event']) onInputChange(event) {
        if (event.target && event.target.maxLength === event.target.value.length) {
            $(":input")[$(":input").index(document.activeElement) + 1].focus();
        }
    }
}

my-component.html

Angular | Automatically focus next input on max length

4 Answers