在输入中的每 4 位后添加空格答案

【问题标题】：Add space after every 4th digit in input在输入中的每 4 位后添加空格
【发布时间】：2018-11-10 04:51:45
【问题描述】：

我需要在输入的每 4 位数字后添加一个空格，我在控制台中得到了这个，我怎样才能在 Angular 5 中更改输入。

我在下面给出的代码 .ts

  mychange(val) {
    const self = this;
    let chIbn = val.split(' ').join('');
    if (chIbn.length > 0) {
      chIbn = chIbn.match(new RegExp('.{1,4}', 'g')).join(' ');
    }
    console.log(chIbn);
    this.id = chIbn;
  }

HTML

<input class="customerno" (ngModelChange)="mychange($event)" [formControl]="inputFormControl" (keydown.backspace)="onKeydown($event)" maxlength="{{digit}}" (keyup)="RestrictNumber($event)" type="tel" matInput [(ngModel)]="id" placeholder="Customer No. ">

控制台：

1
11
111
1111
1111 1
1111 11
1111 111
1111 1111
1111 1111 1
1111 1111 11
1111 1111 111
1111 1111 1111

我改编自Angular 2 : add hyphen after every 4 digit in input , card number input。但是我把hypen改成了空格。

【问题讨论】：

标签： angular typescript angular5

【解决方案1】：

我会建议查看此指令

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

@Directive({
  selector: '[credit-card]'
})
export class CreditCardDirective {

@HostListener('input', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;

    let trimmed = input.value.replace(/\s+/g, '');
    if (trimmed.length > 16) {
      trimmed = trimmed.substr(0, 16);
    }

    let numbers = [];
    for (let i = 0; i < trimmed.length; i += 4) {
      numbers.push(trimmed.substr(i, 4));
    }

    input.value = numbers.join(' ');

  }
}

在你的html模板中使用

<input type="text" credit-card>

这里是 source code

更新：（2019 年 10 月 10 日）输入类型只能是text（默认类型）

【讨论】：

注意：如果您的输入是type="number"，这将不起作用。如果您在 number 输入上使用它，当您超过第一组 4 位数字时，您将从指令中收到 The specified value "0000 0" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)? 错误，并且输入将重置为空。
@Coffee-Tea -- 没问题。顺便说一下您的编辑：我发现此指令确实适用于其他输入类型，而不是仅 text。它不适用于number，因为带有空格的数字输入无效，句号。作为我的方案的解决方法，我需要在数字开头使用空格，并且我想在移动设备上显示数字键盘 - 我使用 tel 输入类型（带有数字/空格 - 正则表达式图案）;它对我来说很好。我也相信它可以灵活地与其他输入类型一起使用，例如search 和textareas。
我在下面的解决方案中选择了tel，这似乎运作良好。

【解决方案2】：

别忘了处理退格键、光标位置和美国运通

我必须处理一些额外的复杂性，但这可能是许多人在开发时会遇到的问题。在重写输入值时，我们需要考虑使用Backspace 键和箭头键。还需要考虑美国运通号码，而不仅仅是 4-4-4-4 号码。

这是我在组件中使用模板引用变量和光标位置检测的方法。（如果您只有一个获取信用卡号码的组件，则不需要自定义指令，这通常是这种情况。）

要处理Backspace 和光标箭头键，我们必须存储原始光标位置并在从字符串末尾以外的任何位置编辑后恢复它。

为了能够处理美国运通，我使用一个名为partitions 的变量来存储美国运通卡的 4-6-5 间距格式和所有其他卡的 4-4-4-4 间距格式。我们在添加空格时循环partitions。

  /* Insert spaces to make CC number more legible */
  cardNumberSpacing() {
    const input = this.ccNumberField.nativeElement;
    const { selectionStart } = input;
    const { cardNumber } = this.paymentForm.controls;

    let trimmedCardNum = cardNumber.value.replace(/\s+/g, '');

    if (trimmedCardNum.length > 16) {
      trimmedCardNum = trimmedCardNum.substr(0, 16);
    }

     /* Handle American Express 4-6-5 spacing format */
    const partitions = trimmedCardNum.startsWith('34') || trimmedCardNum.startsWith('37') 
                       ? [4,6,5] 
                       : [4,4,4,4];

    const numbers = [];
    let position = 0;
    partitions.forEach(partition => {
      const part = trimmedCardNum.substr(position, partition);
      if (part) numbers.push(part);
      position += partition;
    })

    cardNumber.setValue(numbers.join(' '));

    /* Handle caret position if user edits the number later */
    if (selectionStart < cardNumber.value.length - 1) {
      input.setSelectionRange(selectionStart, selectionStart, 'none');
    }
  }

如果您有自己的例程来检测美国运通号码，请使用它。我在这里使用的只是检查前两位数字并将它们与PAN/IIN standards 进行比较。

在你的组件中，确保你有正确的导入：

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

还有：

  @ViewChild('ccNumber') ccNumberField: ElementRef;

当您设置表单控件时，请执行以下操作，以便在您的正则表达式模式中包含空格：

this.paymentForm = this.fb.group({
  cardNumber: ['', [Validators.required, Validators.pattern('^[ 0-9]*$';), Validators.minLength(17)]]
})

最后，在您的模板中，像这样配置您的元素：

    <input maxlength="20"
        formControlName="cardNumber"
        type="tel"
        #ccNumber
        (keyup)="cardNumberSpacing()">

你应该很高兴！

【讨论】：