JavaScript

email-autocomplete.jsを使ってメールアドレス入力時にドメインを入力補完する方法

jquery.email-autocomplete.jsを使ってメールアドレス入力項目の入力時にドメイン(@マーク以降)を入力補完する方法をご紹介します。
メールアドレス入力時に「@」マーク以降、以下(例)の様に自動的で入力補完してくれるjsプラグインです。

(例)
  • 「g」を入力すると「gmail.com」
  • 「h」を入力すると「yhotmail.com

メールアドレス入力項目の入力時にドメイン(@マーク以降)を入力補完する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

 

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