jquery.inputmask

JavaScript

テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

jquery.inputmaskは、ウェブページでのテキスト入力のマスクを作成するjQueryプラグインです。ここでいうマスクとは、入力を補助する役割です。このjquery.inputmaskはフォーム入力(お問い合わせ・アンケート・投票など)に使用すると、とても効果的でしょう。クリエイターが事前に定義したフォーマット通りに、ユーザーに入力してもらうことが期待できます。構築が簡単であったり、入力マスクの種類も豊富であったりと使い勝手のいいプラグインです。

jquery.inputmask

デモ

jquery.inputmaskは、デモページがイメージしやすく作られているので、どういったプラグインなのかは、「実際に入力してみる」のが一番だと思いました。ですので、実際に試してみた入力の様子を具体的に紹介したいと思います。

デモページには「日付・通貨・ナンバープレート・進数・電話番号・IPアドレス・メールアドレス」の入力スペースが実装されています。

日付は「dd/mm/yyyy」と「mm/dd/yyyy」の2タイプです。日付のみの入力で、スラッシュ記号は自動で入力されます。

通貨・ナンバープレート・電話番号は海外版ですが、これは実装するときに変更が可能ですので安心してください。

IPアドレスはご存知かと思いますが、パソコンなどあらゆる通信機器に搭載されている識別番号です。「___.___.___.___」というような入力補助がついていました。例えば、「123.456.789.012」というような入力になります。

アドレスは「_@_._ 」と入力補助がついており、「abc@defg.ne.jp」というように入力すべきだということがユーザーに認識されます。

  • Complete(完了):入力後、問題がない場合に、オレンジ色になります。
  • Incomplete(未完全):入力がされていない場合に、オレンジ色になります。
  • Cleared(削除):入力したテキストを削除した場合に、オレンジ色になります。
  • Valid(有効な):入力項目が有効である場合に、オレンジ色になります。
  • Input(入力):テキストを入力中の場合に、オレンジ色になります。

以上のように、jquery.inputmaskは、入力補助の機能が十分に備わったプラグインです。

jquery.inputmask

関連記事

  1. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  2. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  3. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  4. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

  5. jQuery Hero Slider Plugin
  6. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景

アーカイブ

PAGE TOP