クイックスタート

このクイックスタートでは、Web ページに２つの wijinputmask ウィジェットを追加し、ウィジェットの外観と動作をカスタマイズする方法を学びます。１つ目のウィジェットでは、placeholder オプションを使用して初期テキストを作成し、pickersオプションのlist属性を使用してドロップダウンリストを作成します。２つ目のウィジェットでは、maskFormat オプションと passwordChar オプションを使用して、社会保障番号テキストボックスを作成します。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「Wijmo CDN」の CDN ファイルを参照してください。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

<body> タグ内に次のマークアップを追加して、２つのウィジェットを作成します。<input> 要素はウィジェットを作成し、id 属性を jQuery で呼び出して初期化します。
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
マークアップ
コードのコピー

<input type="text" id="textbox1" /> <br> <h3>Enter your SSN:</h3> <input type="text" id="textbox2" />

参照	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script>

マークアップ	コードのコピー
<input type="text" id="textbox1" /> <br> <h3>Enter your SSN:</h3> <input type="text" id="textbox2" />

<head> タグ内の参照の下に次のスクリプトを追加して、ウィジェットを初期化し、データを読み込みます。

ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます

HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。Null テキストの「Click the arrow」が１つ目のテキストボックスに表示されます。矢印をクリックすると、コンボ項目がドロップダウンリストに表示されます。２つ目のテキストボックスに適当に数字を入力します。パスワード文字を使用して数字が隠されます。

関連トピック

参照