angular - 大写输入字段指令

Question

我想使用指令将所有输入数据转换为大写。为此，我创建了这个自定义指令:

@Directive({
  selector: '[appToUpperCase]'
})
export class ToUpperCaseDirective {

  constructor() {}

  @HostListener('input', ['$event']) onKeyUp(event) {
    event.target['value'] = event.target['value'].toUpperCase();
  }

}

我就是这样使用它的:

<form [formGroup]="formGroup" appToUpperCase>

除了当我在我的字段中输入文本时，它几乎可以正常工作，大写转换是 permorm 但焦点设置在字段的末尾......所以当我编辑预填充输入时，如果我想修改数据的开头，我必须在每个 Keyup 事件后将焦点设置在正确的位置...

我该如何解决？

Answer 1

根据我读过的一些帖子，我在 Angular 7 中针对大写和小写开发了一个解决方案。但我只测试了 react 形式。该方案解决了最后一个词和光标位置的问题。

// user.component.html
<input  type="text" name="name" class="form-control" formControlName="name" uppercase />


// user.component.ts
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[uppercase]',
  host: {
    '(input)': '$event'
  }
})
export class UppercaseInputDirective {

  lastValue: string;

  constructor(public ref: ElementRef) { }

  @HostListener('input', ['$event']) onInput($event) 
  {
    var start = $event.target.selectionStart;
    var end = $event.target.selectionEnd;
    $event.target.value = $event.target.value.toUpperCase();
    $event.target.setSelectionRange(start, end);
    $event.preventDefault();

    if (!this.lastValue || (this.lastValue && $event.target.value.length > 0 && this.lastValue !== $event.target.value)) {
      this.lastValue = this.ref.nativeElement.value = $event.target.value;
      // Propagation
      const evt = document.createEvent('HTMLEvents');
      evt.initEvent('input', false, true);
      event.target.dispatchEvent(evt);
    }
  }
}

我在 stackblitz 中张贴在这里