CODEWITHSUNDEEP
angular
user3198259
user3198259

Reputation: 174

How to handle a auto tab in angular4

I need to move the next text box after typing in text from first text box. It has to auto move after typing text in first tab to next tab.

<div class="autotabbed-container">
  <div id="example1" class="autotabbed">
    <h3>Bank sort code: XX-XX-XX</h3>
    <input type="text" maxlength="2" size="2" />
    -
    <input type="text" maxlength="2" size="2" />
    -
    <input type="text" maxlength="2" size="2" />
  </div>
</div>

When I type the text in first text box the cursor need to move next text box. Please help how to achieve this in angular 4.

Same code is not working if I want apply in ngFor. In below code if I want to display text box based on ngFor loop. In first td I will display the password text boxes and next td I will display only star. In this case how we can dynamically apply #input. I need to point only first td items not next td items. So in this case how we can achieve auto focus. 

<tr>
  <ng-container *ngFor="let i of dynamicArr, let x = index">
    <td *ngIf="i !== '*'">
      <input type="password" #input1 formControlName="dyna{{i}}" id="dyna{{i}}" (input) = "onInputEntry($event, input2)" required maxlength="1" />
    </td>
    <td *ngIf=" i === '*' ">
      <img class="flotado_right" id="starimage" src="starimage.jpg" class="dot-image">        
    </td>
  </ng-container>
</tr>

I am building dynamic array like below and dynamic text is have values like 2 5 and 7. Inthis case dynamicArr[2] = 1, dynamicArr[5] = 2 ,dynamicArr[7] = 3 so other values of values of dynamicArr is * 

for (let i = 0; i < 10; i++) {
  if (((i + 1) === this.dynamictext[0])) {
    this.dynamicArr[i] = '1';
  } else if (((i + 1) === this.dynamictext[1])) {
    this.dynamicArr[i] = '2';
  } else if (((i + 1) === this.dynamictext[2])) {
    this.dynamicArr[i] = '3';
  } else {
    this.dynamicArr[i] = '*';
  }
}

Upvotes: 5

Views: 10139

Answers (4)

David Ortiz
David Ortiz

Reputation: 995

If you want re-usable code try with a custom directive.

Directive:

import {Directive, HostListener, Input} from '@angular/core'

@Directive({
  selector: '[appAutoTab]'
})
export class AutoTabDirective {
  @Input('appAutoTab') appAutoTab

  @HostListener('input', ['$event.target']) onInput(input) {
    const length = input.value.length
    const maxLength = input.attributes.maxlength.value
    if (length >= maxLength) {
      this.appAutoTab.focus()
    }
  }
}

(remember to import the directive in the app.module)

@NgModule({
  declarations: [
   AutoTabDirective
  ]})

HTML

<input #input1 type="text" maxlength="2" [appAutoTab]="input2"/>
<input #input2 type="text" maxlength="2"/>

Upvotes: 7

sooraj
sooraj

Reputation: 46

this can be done like this HTML

<tr>
 <ng-container *ngFor="let i of dynamicArr, let x = index">
   <td *ngIf="i !== '*'">
     <input #tab type="password" id="tab{{i}}" required maxlength="1" class="tab" (input)="onInputEntry($event,'tab',(i))" />
   </td>
   <td *ngIf=" i === '*' " class="image">&</td>
 </ng-container>
</tr>

component

onInputEntry(event, id, nextInputIndex) {
  let input = event.target;
  let nexInput = +nextInputIndex + 1;
  let newID = id + nexInput;
  document.getElementById(newID).focus();
}

Upvotes: 3

blueprintchris
blueprintchris

Reputation: 1105

Get the element through Renderer2 via ViewChild and focus, like so:

HTML:

<input #input1 type="text" maxlength="2" size="2" (keydown.enter)="focusInput2()"/>
<input #input2 type="text" maxlength="2" size="2" />

TypeScript:

export class MyComponent implements OnInit {

  constructor(private _renderer2: Renderer2)

  @ViewChild('input2') private input2: ElementRef;

  focusInput2(){
      this._renderer2.selectRootElement(this.input2["nativeElement"]).focus();
  }
}

Don't forget to import:

import { ViewChild, ElementRef, Renderer2 } from '@angular/core';

When you press enter on the first input, it will focus second input. This of course is down to the discrepancy of when you want the focus to happen.

Upvotes: 3

Jens Bodal
Jens Bodal

Reputation: 1757

You could use the (input) event and template reference variables (#var) to determine if another element should be selected.

<input #input1 type="text" maxlength="2" size="2" (input)="onInputEntry($event, input2)" />
-
<input #input2 type="text" maxlength="2" size="2" />

---

// component 
onInputEntry(event, nextInput) {
  let input = event.target;
  let length = input.value.length;
  let maxLength = input.attributes.maxlength.value;

  if (length >= maxLength) {
    nextInput.focus();
  }
}

Upvotes: 4

Related Questions