指向大寫字母輸入字段

我想使用指令將所有輸入數據轉換爲大寫字母。爲了實現這一目標，我創建這個定製指令：指向大寫字母輸入字段

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

    constructor() {} 

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

}

我用它這樣的：

<form [formGroup]="formGroup" appToUpperCase>

當我在字段中輸入文本它的工作原理差不多好了exept的是，上殼變換但是焦點設置在字段的末尾......因此，當我編輯預先填充的輸入時，如果要修改數據的開始，我必須在每個Keyup事件之後將焦點設置在正確的位置。 ..

我該如何解決呢？

來源

2017-10-19 Julien AZEMA

基本上當你修改從勢在必行碼值時，它變得難以管理光標的位置。當您重新輸入值輸入值時，它會在輸入開始時拋出光標。

我建議你去CSS方式。更清潔

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

來源

2017-10-19 07:55:56

問題是，CSS以大寫顯示數據，但不轉換該值。我有許多頁面有很多窗體，所以我想要一個簡單的方法將傳入的數據轉換爲大寫字母以顯示在模型中。這就是爲什麼我使用了指令 –

@JulienAZEMA的原因我會用這個，你得到了視覺外觀，看起來你有一個表單，所以你可以做的是，在提交時你可以迭代表單對象屬性和轉換他們大寫:) – Alex

Pankaj的想法是比創建指令更好。你只需要發送data.toUpperCase（）。無論如何，如果你想使用這樣的指令。注意，不僅我們必須使用preventDefault（），我們必須調度事件變化

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

    } 

}

來源

2017-10-19 14:21:17 Eliseo

指向大寫字母輸入字段

回答

相關問題