Question

我需要创建一条指令，将所有表单的输入字段格式化为大写。

我已经做到了：

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

@Directive({
  selector: '[uppercaser]'
})
export class UperCaserDirective {

  lastValue: string;

  constructor(public ref: ElementRef) {
  }

  @HostListener('input', ['$event']) onInput(event) {
    const resEventValue = event.target.value.toUpperCase();

    if (!this.lastValue || (this.lastValue && event.target.value.length > 0 && this.lastValue !== resEventValue)) {
      this.lastValue = this.ref.nativeElement.value = resEventValue;

      const evt = document.createEvent('HTMLEvents');
      evt.initEvent('input', false, true);
      event.target.dispatchEvent(evt);
    }
  }

}

但这仅适用于一个输入字段...

我想这样做是为了最小化我必须在每个输入字段中放入的别名...

我需要使用DIRECTIVE，以尽量减少重复

Answer 1

<input id="name" data-upper type="text"/>
<input id="middle" data-upper type="text"/>
<input id="sur" data-upper type="text"/>

动态创建的具有属性的元素上的文本上部以及何时进行击键动作

$(document.body).on('keyup', '[data-upper]', function toUpper() {
  this.value = this.value.toUpperCase();
});

否则，您可以为此使用管道。

表格-将所有输入格式化为大写的指令

1 个答案: