5.20241.9
5.20241.9

マスク入力:概要

InputMaskコントロールを使用すると、キー入力と同時にユーザー入力を検証し、その書式を設定できます。このコントロールは、ユーザーが無効なデータを誤って入力することを防ぎ、ユーザーがキー入力するときにリテラル(日付のスラッシュなど)をスキップすることで時間を節約します。

入力の検証に使用するマスクは、maskプロパティで定義されます。マスクには、次の特殊文字を使用できます。

文字 マスクの種類
0 数字。
9 数字またはスペース。
# 数字、符号、またはスペース。
L 英字
l 英字またはスペース。
A 英数字。
a 英数字またはスペース。
. ローカライズされた小数点。
, ローカライズされた桁区切り。
: ローカライズされた時刻区切り。
/ ローカライズされた日付の区切り文字。
$ ローカライズされた通貨記号。
< 後続の文字を小文字に変換します。
> 後続の文字を大文字に変換します。
\ 任意の文字をエスケープして、リテラルに変えます。
9 DBCS数字。
J DBCSひらがな。
G DBCS大文字ひらがな。
K DBCSカタカナ。
N DBCS大文字カタカナ。
K SBCSカタカナ。
N SBCS大文字カタカナ。
Z 任意のDBCS文字。
H 任意のSBCS文字。
その他すべての文字 リテラル。

コントロールの主なプロパティは、次のとおりです。

  1. value:ユーザーの入力とテンプレート文字を含む、コントロールのすべてのテキストコンテンツを返します。
  2. rawValuevalueプロパティとは異なり、rawValueプロパティを使用すると、テンプレート文字を含まず、入力文字のみを含むコントロール値を取得または設定できます。
  3. promptChar:デフォルトでは、InputMaskコントロールは、アンダースコア文字を使用して入力を求める位置を示します。これは、promptCharプロパティに新しい文字列を割り当てることで変更できます。サンプルについては、プロンプト文字のデモを参照してください。
  4. maskFull:マスクが完全に入力されているかどうかを示します。このコントロールは、マスクが完全に入力されるまで、内容が赤で表示されます。また、マスクが完全に入力されないままコントロールがフォーカスを失った場合は、内容がクリアされます。サンプルについては、全て入力のデモを参照してください。

InputMask

HTML
<input id="thePhone"><br>
JavaScript
import * as input from '@mescius/wijmo.input';

function init() {
    let thePhone = new input.InputMask('#thePhone', {
        mask: '000-0000-0000'
    });
}