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
※流用される場合は自己責任でお願いします。
デモページ