Direktive für Großbuchstaben Eingabefelder

Question

Ich möchte eine Direktive verwenden, um alle Eingabedaten in Großbuchstaben umzuwandeln. Um das zu erreichen, schaffe ich diese kundenspezifische Richtlinie:

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

    constructor() {} 

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

} 

Und ich benutze es wie folgt aus:

<form [formGroup]="formGroup" appToUpperCase> 

Es exept, dass fast gut funktioniert, wenn ich Text in meinem Feld eingeben, verwandeln das obere Gehäuse ist permutiert, aber der Fokus liegt am Ende des Feldes ... Wenn ich also eine vorgefüllte Eingabe bearbeite, wenn ich den Beginn der Daten ändern möchte, muss ich den Fokus nach jedem Keyup-Ereignis an der richtigen Stelle setzen. ..

Wie kann ich das beheben?

Answer 1

Grundsätzlich, wenn Sie den Wert von imperativem Code ändern, wird es schwierig, die Position des Cursors zu verwalten. Wenn Sie den Wert für den Wert neu schreiben, wird der Cursor am Anfang der Eingabe angezeigt.

Ich würde Ihnen empfehlen, für CSS Weg zu gehen. Mehr Reiniger

[my-attribute] input { text-transform: uppercase; } 

Answer 2

Pankajs Idee, es ist besser als eine Richtlinie zu erstellen. Sie müssen nur data.toUpperCase() senden. Wie auch immer, wenn Sie eine solche Anweisung verwenden möchten. Seien Sie vorsichtig, nicht nur müssen wir preventDefault() verwenden, müssen wir Ereignisänderung senden

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

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

    constructor() { } 

    @HostListener('keydown', ['$event']) onKeyDown(event:KeyboardEvent) { 
    if (event.keyCode>32 && event.keyCode<128) 
    { 
     event.target['value']+=event.key.toUpperCase(); 
     event.preventDefault(); //stop propagation 
     //must create a "input" event, if not, there are no change in your value 
     var evt = document.createEvent("HTMLEvents"); 
     evt.initEvent("input", false, true); 
     event.target.dispatchEvent(evt); 
    } 

    } 

}