Directive pour les champs de saisie majuscules

Question

Je souhaite utiliser une directive pour transformer toutes les données d'entrée en majuscules. Pour cela, je crée cette directive personnalisée:

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

    constructor() {} 

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

} 

Et je l'utilise comme ça:

<form [formGroup]="formGroup" appToUpperCase> 

Il fonctionne presque bon exepté que quand j'entrer du texte dans mon champ, le boîtier supérieur de transformation est permert, mais la mise au point est réglée à la fin du champ ... Donc, quand je modifie une entrée pré-remplie, si je veux modifier le début des données, je dois mettre le focus au bon endroit après chaque événement KeyUp. ..

Comment puis-je résoudre ce problème?

Answer 1

Fondamentalement, lorsque vous modifiez la valeur du code impératif, il devient difficile de gérer la position du curseur. Lorsque vous réécrivez une valeur d'entrée de valeur, elle lance le curseur au début de l'entrée.

Je vous recommande d'opter pour la méthode CSS. Plus propre

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

Answer 2

L'idée de Pankaj c'est mieux que de créer une directive. Vous devez seulement envoyer data.toUpperCase(). Quoi qu'il en soit, si vous voulez utiliser une directive comme celle-ci. Attention, non seulement nous devons utiliser preventDefault(), nous devons envoyer le changement d'événement

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); 
    } 

    } 

}