html 键入4个数字后，输入字段光标在开始处的角位移

yc0p9oo0 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(114)

我需要一些帮助在后面的场景的React形式输入字段。我有一个字段名，输入SSN的最后四位数字。在填写最后四位数字后，触发API调用以检查有效SSN。如果成功，则传递SSN的最后四位数字;如果失败，则必须在开始处移动字段光标以输入前5位数字SSN的数字，实际SSN格式如123-45-6789。
例如，如果用户输入6789，API发送失败响应，则输入字段光标移到开头，现在如果用户输入下一个数字，则显示5-6789，之后显示45-6789、3-45-6789，依此类推，直到不再显示123-45-6789。
HTML代码。

<input formControlName="ssn" type="text"
                            name="ssn" [imask]="ssnMask"
                            (keyup)="isSSNCorrect($event.target.value)" />

component.ts

this.ssnMask = "0000";

public isSSNCorrect(ssnNumber: string) {
      if (ssnMask == '0000') {
        if (ssnNumber.length === 4) {
          this.service.checkSSN(ssn).subscribe(
            res => {
              if (res.success) {
                console.log('success');
              } else {
                this.ssnMask = "000-00-0000"
                this.atBeginning();
              }
            }, (err) => {}
          );
        }
      }
  }

atBeginning() {
    div.nativeElement.setSelectionRange(0, 0);   
}

上面的代码不会在开头移动光标，如果我删除imask，那么它会在开头移动光标，但在这种情况下，它显示的不是SSN格式。
我附上了下面的链接作为参考，在此，如果我输入4位数，然后点击测试按钮，我想光标移动在输入字段的开始和下一个输入采取分配的imask格式，即123-45-6789。
stackblitz example

Html

来源：https://stackoverflow.com/questions/74793996/angular-shift-input-field-cursor-at-beginning-after-4-digits-typed

1条答案

按热度按时间

bprjcwpo1#

你能试试下面的代码吗？在这里集合选择看起来工作得很好。

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

@Component({
  selector: 'my-app',
  template: `
  <input #input [ngModel]="value" [imask]="mask">
  <button (click)="click()">test</button>

`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('input') input: ElementRef<any>;
  name = 'iMask';

  maskToDot = {
    mask: '000-00-0000',
    scale: 2,
  };

  mask = {
    mask: '0000',
    scale: 2,
  };

  value: string = '';

  ngAfterViewInit() {
    console.log(this.input);
    // setCaretPosition(this.input.nativeElement, 3);
  }

  click() {
    this.mask = this.maskToDot;
    setTimeout(() => {
      this.input.nativeElement.setSelectionRange(0, 0);
      this.input.nativeElement.focus();
    });
  }
}

forked stackblitz

赞(0）回复(0）举报 2022-12-16

我来回答

html 键入4个数字后，输入字段光标在开始处的角位移

1条答案

相关问题

热门标签

最新问答