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. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  2. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  3. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  4. no-image
  5. jQuery liMarquee
  6. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP