Question

我需要在IE 11中接受10,12作为有效数字，因为用户只有德国数字键盘作为输入设备，而只有逗号作为小数点分隔符。

当前行为是（用户输入->使用的值）

10,12 -> 10

所需的行为是

10,12 -> 10.12
10.12 -> 10.12

目前在Chrome中。

我当前的想法是为输入type =“ text”实现一个ControlValueAccessor，它将值解析为数字，但是我对此的尝试失败了。

输入必须与reactForms一起使用，并且必须是数字值

Answer 1

我遇到了同样的问题，即使将语言设置为其他语言环境并使用小于1的步长，也无法使用<input type="number">作为小数点分隔符使用逗号。

<input type="number" step="0.01" lang="en-US">

因此，我选择了基于<input type="text">的自定义解决方案，并采用了自定义过滤机制，仅允许输入数字。

有关完整的演示，请参见this stackblitz。

最重要的部分是过滤用户在字段中输入的内容。我建议您编写一条指令，以侦听输入/键入/粘贴事件，并使用正则表达式仅允许使用浮点/整数。

以下正则表达式（/^-?\d*(,|\.)?\d*$/）允许数字以可选的-开头，后跟数字，然后是逗号或点号以及更多数字。

如果新值（当前值+按下的键）与正则表达式不匹配，只需使用event.preventDefault()防止事件发生。否则，什么也不做，让值进入输入。

请注意，您还必须注意复制/剪切/粘贴/撤消/重做特殊键。并且还要考虑光标位置和选择（如果有）。

过滤完成后，您可以实现ControlValueAccessor接口，并通过其change/input事件将其绑定到您的输入。在这些处理程序中执行字符串到数字的转换，并在绑定到value属性的吸气剂或管道中执行数字到字符串的转换。

这里是此类指令的示例，您可以通过将正则表达式作为输入参数来对其进行概括。

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

@Directive({
  selector: '[appNumberOnly]'
})
export class NumberOnlyDirective {
  @HostListener('keydown', ['$event'])
  public onKeydown(event: KeyboardEvent): void {
    const { key } = event;
    if (this.isSpecialOperation(event) || !this.isKeyPrintable(event)) {
      return;
    }
    const newValue = this.getNewValue(event.target as HTMLInputElement, key);
    if (!this.valueIsValid(newValue)) {
      event.preventDefault();
    }
  }

  @HostListener('paste', ['$event'])
  public onPaste(event: ClipboardEvent): void {
    const pastedText = event.clipboardData.getData('text');
    const newValue = this.getNewValue(event.target as HTMLInputElement, pastedText);
    if (!this.valueIsValid(newValue)) {
      event.preventDefault();
    }
  }

  private getNewValue(target: HTMLInputElement, str: string): string {
    const { value = '', selectionStart, selectionEnd } = target;
    return [
        ...value.split('').splice(0, selectionStart),
        str,
        ...value.split('').splice(selectionEnd)].join('');
  }

  private valueIsValid(value: string): boolean {
    return /^-?\d*(,|\.)?\d*$/.test(value);
  }

  private isSpecialOperation(event: KeyboardEvent): boolean {
    const { keyCode, ctrlKey, metaKey } = event;
    // allow ctr-A/C/V/X/Y/Z
    const keysACVXYZ = [65, 67, 86, 88, 89, 90];
    if ((ctrlKey || metaKey) && keysACVXYZ.indexOf(keyCode) >= 0) {
      return true;
    }
    return false;
  }

  private isKeyPrintable(event: KeyboardEvent): boolean {
    const { keyCode } = event;
    return (
      (keyCode > 47 && keyCode < 58)      || // number keys
      keyCode === 32 || keyCode === 13    || // spacebar & return key(s)
      (keyCode > 64 && keyCode < 91)      || // letter keys
      (keyCode > 95 && keyCode < 112)     || // numpad keys
      (keyCode > 185 && keyCode < 193)    || // ;=,-./` (in order)
      (keyCode > 218 && keyCode < 223));      // [\]' (in order)
  }
}

还有一个实现ControlValueAccessor的自定义输入数字组件：

import { Component, ViewChild, forwardRef, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'app-input-number',
  template: `
    <input
      type="text"
      #input
      appNumberOnly
      [placeholder]="placeholder"
      [value]="_stringifiedValue"
      (input)="_onInput($event.target.value)"
      (change)="_onChange($event.target.value)"
      (blur)="input.value = _stringifiedValue">
  `,
  styles: [`
    :host { width: 100%; display: block; }
    input { width: 100%; }
  `],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputNumberComponent),
      multi: true
    }
  ]
})
export class InputNumberComponent implements ControlValueAccessor {
  private onChange = [(_: number) => {}];
  private onTouch = [() => {}];

  @Input() placeholder;

  @ViewChild('input') _input: ElementRef;

  @Input()
  get value(): number {
    return this._value;
  }
  set value(value: number) {
    const safeValue = this.safeValue(value);
    if (safeValue !== this._value) {
      this._value = safeValue;
      this.onChange.forEach(fn => fn(safeValue));
    }
  }
  private _value: number = undefined;

  @Output() valueChange = new EventEmitter<number>();

  get _stringifiedValue(): string {
    const val = (this._input.nativeElement.value || '').replace('.', ',');
    if (val === '-' || val === ',') return val;
    const safeValue = this.safeValue(this.value);
    return this.stringify(safeValue).replace('.', ',');
  }

  _onInput(value: string): void {
    this.value = this.safeValue(value);
  }

  _onChange(value: string): void {
    this.value = this.safeValue(value);
    this.valueChange.emit(this.value);
  }

  private safeValue(val: string | number): number {
    const safeValue = parseFloat(this.stringify(val).replace(',', '.'));
    return isNaN(safeValue) ? undefined : safeValue;
  }

  private stringify(val: string | number): string {
    return val === undefined || val === null ? '' : `${val}`;
  }

  public registerOnChange(fn: any): void {
    this.onChange.push(fn);
  }

  public registerOnTouched(fn: any): void {
    this.onTouch.push(fn);
  }

  public writeValue(inputValue: number): void {
    this.value = this.safeValue(inputValue);
  }
}

然后可以将该组件与[(ngModel)]或[(value)]进行双向绑定。它将也适用于反应形式：

<app-input-number [(ngModel)]="value"></app-input-number>
<app-input-number [(value)]="value"></app-input-number>

在IE 11中使用Angular +材质支持输入类型=“数字”中的“，”

1 个答案: