JavaScript PR

メールアドレス入力をラクに！email-autocomplete.jsでドメイン自動補完の設定方法

  /
記事内に商品プロモーションを含む場合があります

メールアドレスを入力する際、ドメイン部分（@マーク以降）を自動で補完してくれる便利なJavaScriptプラグイン、「jquery.email-autocomplete.js」の使い方をご紹介します。
このプラグインを使えば、ユーザーはメールアドレスの入力時にドメインの一部をタイプするだけで、一般的なドメインが自動的に補完され、入力の手間を省くことができます。

使い方の例

  • 「g」と入力すると「gmail.com」が補完されます。
  • 「h」と入力すると「hotmail.com」が補完されます。
  • 「y」と入力すると「yahoo.co.jp」が補完されます。

Contents

CSSの記述

まず、メールアドレス入力フォームのスタイルを設定します。以下の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>

JavaScriptの記述

次に、jquery.email-autocomplete.jsプラグインを利用するためのJavaScriptを設定します。jquery.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>

メールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完するデモページ

実際にこのプラグインを使ったデモページをご覧になりたい方は、以下をご覧ください。

メールアドレス入力項目の入力時にドメイン（@マーク以降）を入力補完するデモページ

ソース元：email-autocomplete

このプラグインのソースは、GitHubの以下ページで確認できます。

email-autocomplete

まとめ

メールアドレスの入力補完機能は、ユーザーの入力負担を減らし、フォームの利便性を向上させるための素晴らしいツールです。jquery.email-autocomplete.jsを使えば、簡単にこの機能を実装することができます。ぜひ試してみてください！

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

メールアドレス入力 入力補完
RELATED POST