web-dev-qa-db-ja.com

Typescript + Html：入力フィールドで大文字を強制する方法

私はangular（TypeScript）で作業していますが、ユーザーがコードフィールドと説明フィールドを挿入する必要があるHTMLのモデルフォームがあります。

コードフィールドは、常に大文字でユーザーが入力する必要があります。

私はこの質問を見つけて従いました： 入力値をangular 2（ngControlに渡す値））で大文字に変換する方法

しかし、ユーザーが挿入する最後の文字は小文字のままです..基本的なことは、データベースが常にすべて大文字になることです（適切に機能するように4文字の制限も入れています）これは今の私のコードですが、上に書かれているように正しく機能しない：

<input type="text" id="code" #code class="form-control" formControlName="code" maxlength="4"
                 (input)="code.value=$event.target.value.toUpperCase()">

誰もが迅速で機能的かつ高速なソリューションを見つけましたか？

ありがとうございました！

javascripthtmlangulartypescript
10
Nobady

_<input>_タグにoninput="this.value = this.value.toUpperCase()"を追加するだけで、入力フィールドのすべての入力が即座に大文字に変換されます。

35
Ali Heikal

ngModelを使用している場合は、ngModelChangeを使用して、JavaScriptの 。ToUpperCase（） でこのようにできます。

<input [ngModel]="person.Name" (ngModelChange)="person.Name = $event.toUpperCase()">
6
DForsyth

pattern属性を使用して、許可される入力を制限できます。また、ユーザーの入力を大文字にしてユーザーを支援することもできます。

<input type="text" pattern="[A-Z]*" name="example" />
3
Fenton

これは私のために働いた。キーアップを使用しただけで、ユーザーが文字を追加するたびに、UIだけでなくモデルでも自動的に大文字に変換されます。

(keyup)="form.patchValue({name: $event.target.value.toUpperCase()})"
0
Edrica J