東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

フォームのメールアドレス入力欄に補完機能をつける

2017.10.25 Posted by

こんにちは、ウェブラボクリエイターズメモです。

10月に入ってから急に寒くなってきましたね、体調管理には気をつけていきましょう。

さて今回はフォームのメールアドレス入力欄に補完機能をつけるjQueryプラグイン「email-autocomplete」を紹介したいと思います。

では早速実装していきます。

まずは以下からプラグインをダウンロードしましょう。

github

HTML内に以下のようにスクリプト部分を記述します。

■スクリプト部分

■HTMLフォーム部分

必要な記述はこれだけです。

作成したDEMOはこちら

試しに「@a」まで入力してみると「@abc.com」が出てきますね。

配布元にその他のオプションや、デフォルトで用意されている補完機能のドメインが記載されていますので足りないものはこちらで用意してあげましょう。

これだけでもメールアドレスの入力がかなり楽になりますね。

ドメインを細かく覚えてない人も多いと思うので是非導入してみてはいかがでしょうか。

以上、クリエイターズメモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278