jquery.email-autocomplete.jsを使ってメールアドレス入力項目の入力時にドメイン(@マーク以降)を入力補完する方法をご紹介します。
メールアドレス入力時に「@」マーク以降、以下(例)の様に自動的で入力補完してくれるjsプラグインです。
(例)
- 「g」を入力すると「gmail.com」
- 「h」を入力すると「yhotmail.com
Contents
メールアドレス入力項目の入力時にドメイン(@マーク以降)を入力補完するCSSの記述
※フォーム(form)のCSSを設定をします。必要に応じて変更して下さい。
<style type="text/css"> <!-- body{ text-align: center; font-size: 16px; } h1{ text-align: center; padding: 10px 0 0 0; font-size: 18px; font-weight: bold; } p{ padding: 15px 0 25px 0; } form{ width: 400px; margin: 0 auto; } --> </style>
jquery.email-autocomplete.jsを使ってメールアドレス入力項目の入力時にドメイン(@マーク以降)を入力補完するJavaScriptの記述
※query.min.js、jquery.email-autocomplete.jsファイルを読み込みます。$(“テキストボックス”).emailautocomplete({補完したいドメインを追加})で(@マーク以降)を入力補完します。入力補完したいドメインは追加できます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="jquery.email-autocomplete.js"></script> <script> $(document).ready(function(){ $(".email").emailautocomplete({ domains: ["dad-union.com", "yahoo.co.jp"] }); }); </script>
メールアドレス入力項目の入力時にドメイン(@マーク以降)を入力補完するHTMLの記述
※ドメイン入力補完したいメールアドレス項目(class=”form-control email”)を用意します。必要に応じて変更して下さい。
<h1>メールアドレス入力項目の入力時にドメイン(@マーク以降)を入力補完します</h1> <p> 以下の入力項目にメールアドレスを入力して下さい。<br> @マーク以降に、 「g」を入力すると「gmail.com」<br> 「y」を入力すると「yahoo.co.jp」<br> 「d」を入力すると「dad-union.com」<br> が自動的に入力補完されます。 </p> <form role="form"> <div class="form-group"> <label for="email">メールアドレス</label> <input type="email" class="form-control email" id="email" placeholder="メールアドレスを入力"> </div> </form>
pagePiling.jsを使ってスクロールでページ切替を行うデモページ
メールアドレス入力項目の入力時にドメイン(@マーク以降)を入力補完するデモページ
ソース元:email-autocomplete
以下がソース元サイトです。
email-autocomplete
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告