今日の人気記事

  1. レスポンシブなパンくずナビを作成する「rCrumbs」
  2. 左右にスクロールできるタブメニュー「ScrollTabs」
  3. テーブルをレスポンシブ対応に「rt Responsive Tables」
  4. 英数字がパラパラめくれるボードを実装「Flight Board」

メールアドレスのドメイン部分を入力補完「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>
スポンサーリンク

関連記事(一部広告含む)