我想使用指令将所有输入数据转换为大写。为此,我创建了这个自定义指令:
@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 事件后将焦点设置在正确的位置...
我该如何解决?
最佳答案
根据我读过的一些帖子,我在 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 中张贴在这里
关于angular - 大写输入字段指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46825078/