[JS]フォームに入力された数字が見やすくなる！指定した桁数ごとに自動で区切るスクリプト -Politespace

Post on:2014年4月30日

クレジットカードや郵便番号など、フォームに入力された数字を指定した桁数ごとに区切って表示するjQueryのプラグインを紹介します。

デモのキャプチャ

Politespace -GitHub

Politespaceのデモ

サイトのキャプチャ

デモページ

デモでは、さまざまな区切りができます。

3桁ずつ区切るなどの同数の区切り
料金など
4桁ずつ区切るなどの同数の区切り
クレジットカードなど
3桁、4桁など異なる数の区切り
郵便番号など
指定数の区切りの後、残りはフリー
米の電話番号など

日本の電話番号のように最初の桁が2桁か4桁、というのは扱えないのがちょっと残念。

Politespaceの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script src="js/jquery.js"></script>
  <script src="js/politespace.js"></script>
</head>

Step 2: JavaScript

jQueryのセレクタで適用を指定し、スクリプトを実行します。

<script>
  jQuery( function(){
    jQuery( document ).trigger( "enhance" );
  });
</script>

Step 3: HTML

input要素に「data-politespace」を加え、桁数の設定は「data-grouplength」で設定します。

まずはシンプルな2桁区切り。
表示例：12 34 56 78 90

<label>
  数字を2桁ずつ区切る
  <input type="text" data-politespace data-grouplength="2" value="1234567890">
</label>

クレジットカードの番号のように複数の桁数ごとに区切ることもできます。
表示例：4444 4444 4444 4444

<label>
  数字を4桁ずつ区切る、数字のみ入力可
  <input type="text" pattern="&#91;0-9&#93;*" data-politespace data-grouplength="4" value="4444444444444444">
</label>

また最後の桁のみフリーにすることができます。
表示例：123 456 7890.........

<label>
  3桁、3桁、のあとはフリー
  <input type="tel" data-politespace data-grouplength="3,3," value="1234567890">
</label>

sponsors

top of page

©2024 coliss