メールアドレスのドメイン部分を入力補完「Email Autocomplete」
当ページのリンクには広告が含まれています。
スポンサーリンク
メールアドレスのドメイン部分を入力補完するプラグイン「Email Autocomplete」を紹介します。
jQueryプラグイン「Email Autocomplete」
このプラグインを使えば、メールアドレスの入力フォームにドメイン部分の補完機能を追加することができます。
例えば、「test@g」と入力すると「gmail.com」が入力候補として表示されるので、「TAB」キーを押すと残りのドメインを入力することができます。
また、オプションでドメインの候補を追加することができるので、ユーザーの入力ミスを少なくすることができそうですね。
スポンサーリンク
デモの入力フォームにメールアドレスを入力してみましょう。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="relocatorのデモでーす。">
<title>Email Autocomplete - jQueryプラグイン</title>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css'>
<style>
.contents {
margin-top: 30px;
width: 800px;
}
.eac-sugg{
color:#ccc;
}
</style>
</head>
<body>
<h1>Email Autocomplete のデモでーす。</h1>
<div class="contents">
<p>以下の入力フォームにメールアドレスを入力してみてください。ドメインが「gmail.com」「yahoo.co.jp」などの場合は入力候補が表示されるので「TAB」キーを押してください。</p>
<form role="form">
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" class="form-control email" id="email" placeholder="Enter email">
</div>
</form>
</div>
<script src="http://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: ["example.com", "yahoo.co.jp"]
});
});
</script>
</body>
</html>
スポンサーリンク