Question

我正在开发一个Angular2应用程序。我试图掩盖一个信用卡。一切都很好，但我遇到了问题。

例如我输入了2222-3333-1111。之后我意识到忘记在2和3之间输入0000。当我尝试输入2到3之间的值时，光标移动到结束，输出就像“2222-0333-3111-1000”。

我尝试了一些来自stackOverFlow的解决方案，但没有任何帮助。请给我一些解决方案来解决这个问题。

以下是我所说的代码

protected digitPattern =  /\d{1,4}\-{0,1}\d{0,4}\-{0,1}\d{0,4}-{0,1}\d{0,4}-{0,1}\d{0,4}/;

constructor(model: FormControlName) {
  this.model = model;
}

@HostListener('input', ['$event']) onInput(event: any) {
  const currentValue = this.model.value;

  this.updateValue(currentValue);
}

@HostListener('ngModelChange', ['$event']) onNgModelChange(currentValue: string) {
  this.updateValue(currentValue);
}

// updates the actual and displayed values
updateValue(currentValue: string) {
  const actualValue = this.getActualValue(currentValue);
  const maskedValue = this.getMaskedValue(actualValue);

  if (currentValue !== actualValue) {
    // This is the actual binding (unmasked) value
    this.model.control.setValue(actualValue, {emitModelToViewChange: false});
  }

  // This is the displaying (masked) value
  this.model.valueAccessor.writeValue(maskedValue);
}

// Returns the masked value
getMaskedValue(actualValue: string): string {
  let maskedValue = '';

  const unmaskedValue = actualValue.replace(/\D+/g, '');

for (let i = 0; i < unmaskedValue.length && i < 23; i++) {
  if (!(i % 4) && (i > 0)) {
      maskedValue += this.separator;
    }
    maskedValue += unmaskedValue[i];
  }


 if (actualValue.endsWith(this.separator)) {
    if (maskedValue.length === 3 || maskedValue.length === 7) {
      maskedValue += this.separator;
    }
  }

  return maskedValue;
}

// Returns the actual (unmasked) value
getActualValue(currentValue: string): string {
  let result = '';

  // Check if something is available to mask
  if (currentValue && currentValue.length > 0) {
    const digits = currentValue.match(this.digitPattern);

    if (digits) {
      for (const value of digits) {
        result += value;
      }
    }
  }
  return result;
}

停止光标从跳转到输入字段的结尾

0 个答案: