メールアドレスのドメイン部分を入力補完「Email Autocomplete」

当ページのリンクには広告が含まれています。

jQuery Plugin » フォーム » メールアドレスのドメイン部分を入力補完「Email Autocomplete」

メールアドレスのドメイン部分を入力補完するプラグイン「Email Autocomplete」を紹介します。

jQueryプラグイン「Email Autocomplete」

このプラグインを使えば、メールアドレスの入力フォームにドメイン部分の補完機能を追加することができます。

例えば、「test@g」と入力すると「gmail.com」が入力候補として表示されるので、「TAB」キーを押すと残りのドメインを入力することができます。

また、オプションでドメインの候補を追加することができるので、ユーザーの入力ミスを少なくすることができそうですね。

デモの入力フォームにメールアドレスを入力してみましょう。

「Email Autocomplete」のデモ

ソース（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>

Email Autocomplete

jQueryプラグイン「Email Autocomplete」

ソース（HTML + jQuery）

関連記事（一部広告含む）