今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. くるくる回る画像ギャラリー「Rondell」
  3. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  4. 画像に拡大・縮小ボタンを「Zoomer」
  5. 画像の拡大・縮小と移動(パン)「pan and zoom 」

国際電話の入力フォーム「International Telephone Input」

スポンサーリンク

国際電話の入力フォームを実装するプラグイン「International Telephone Input」を紹介します。

jQueryプラグイン「International Telephone Input」

このプラグインを使えば、国際電話の入力フォームを実装することができます。

選択したい国の国旗を選択すると……日本の場合は「+81」と国際電話の番号を自動的に入力してくれます。

スポンサーリンク

それではデモページのフォームをご覧ください。

「International Telephone Input」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="International Telephone Input のデモでーす。">
<title>International Telephone Input - jQuery Plugin Demo</title>
<link rel="stylesheet" href="css/intlTelInput.css">
</head>
<body>
<h1>International Telephone Input のデモでーす。</h1>
<form>
  <input id="mobile-number" type="tel">
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/intlTelInput.js"></script>
<script>
$("#mobile-number").intlTelInput({
  defaultCountry: "jp",
  onlyCountries: ['jp', 'us', 'gb', 'gm', 'it', 'fr', 'ro']
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)