郵箱輸入實現型別自動提示功能
現在網站都在追求人性化,以期能夠吸引或者留住使用者。
下面分享一個這方面的例項,那就是當使用者在輸入郵箱的時候,能夠自動提示郵箱的型別,這就免去了輸入是何種型別郵箱的麻煩。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .demo p { width: 1000px; margin-left: auto; margin-right: auto; } .input { padding: 12px; width: 300px; border: 1px solid #c2c2c2; border-radius: 4px; box-shadow: 0 0 1px #fff, inset 0 0 2px rgba(0,0,0,.15); background-color: #F2F2F2; font-size: 14px; } .emailist { border: 1px solid #bdbdbd; border-radius: 4px; background-color: #fff; color: #666; font-size: 14px; list-style-type: 0; padding: 0; margin: 0; overflow: hidden; } .emailist li { padding: 2px 11px; cursor: pointer; } .emailist .on, .emailist li:hover { background-color: #eee; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> (function ($) { $.fn.mailAutoComplete = function (options) { var defaults = { className: "emailist", email: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "live.com", "sohu.com", "sina.com"], zIndex: 11 }; // 最終引數 var params = $.extend({}, defaults, options || {}); // 是否現代瀏覽器 var isModern = typeof window.screenX === "number", visibility = "visibility"; // 鍵值與關鍵字 var key = { "up": 38, "down": 40, "enter": 13, "esc": 27, "tab": 9 }; // 組裝HTML的方法 var fnEmailList = function (input) { var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = []; $.each(params.email, function (index, email) { if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) { arrEmailNew.push(email); } }); $.each(arrEmailNew, function (index, email) { htmlEmailList = htmlEmailList + '<li' + (input.indexSelected === index ? ' class="on"' : '') + '>' + arrValue[0] + "@" + email + '</li>'; }); return htmlEmailList; }; // 顯示還是隱藏 var fnEmailVisible = function (ul, isIndexChange) { var value = $.trim(this.value), htmlList = ''; if (value === "" || (htmlList = fnEmailList(this)) === "") { ul.css(visibility, "hidden"); } else { isIndexChange && (this.indexSelected = -1); ul.css(visibility, "visible").html(htmlList); } }; return $(this).each(function () { this.indexSelected = -1; // 列表容器建立 var element = this; var eleUl = $('<ul></ul>').css({ position: "absolute", marginTop: element.offsetHeight, minWidth: element.offsetWidth - 2, visibility: "hidden", zIndex: params.zIndex }).addClass(params.className).bind("click", function (e) { var target = e && e.target; if (target && target.tagName.toLowerCase() === "li") { $(element).val(target.innerHTML).trigger("input"); $(this).css(visibility, "hidden"); element.focus(); // add on 2013-11-20 } }); $(this).before(eleUl); // IE6的寬度 if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); } // 不同瀏覽器的不同事件 isModern ? $(this).bind("input", function () { fnEmailVisible.call(this, eleUl, true); }) : element.attachEvent("onpropertychange", function (e) { if (e.propertyName !== "value") return; fnEmailVisible.call(element, eleUl, true); }); $(document).bind({"click": function (e) { var target = e && e.target, htmlList = ''; if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) { eleUl.css(visibility, "visible").html(htmlList); } else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) { eleUl.css(visibility, "hidden"); } }, "keydown": function (e) { var eleLi = eleUl.find("li"); if (eleUl.css(visibility) === "visible") { switch (e.keyCode) { case key.up: { element.indexSelected--; if (element.indexSelected < 0) { element.indexSelected = -1 + eleLi.length; } e.preventDefault && e.preventDefault(); break; } case key.down: { element.indexSelected++; if (element.indexSelected >= eleLi.length) { element.indexSelected = 0; } e.preventDefault && e.preventDefault(); break; } case key.enter: { e.preventDefault(); eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html()); eleUl.css("visibility", "hidden"); break; } case key.tab: case key.esc: { eleUl.css("visibility", "hidden"); break; } } if (element.indexSelected !== -1) { eleUl.html(fnEmailList(element)); } } } }); });}; })(jQuery); $(document).ready(function () { $(".inputMailList").mailAutoComplete(); }) </script> </head> <body> <div class="demo"> <p><input type="email" class="input inputMailList" name="email" placeholder="請輸入郵箱" ></p> </div> </body> </html>
相關文章
- jQuery 郵箱輸入字尾自動補全jQuery
- 正規表示式的應用實現郵箱輸入
- Java實現郵箱驗證碼功能Java
- Vue中實現輸入框的自動補全功能Vue
- 帶自動提示功能的jQuery標籤輸入外掛jQuery
- Laravel 專案實現郵箱驗證功能Laravel
- win10自帶郵箱無法登入QQ郵箱Win10
- 直播app原始碼,驗證方式選擇郵箱驗證時,自動給輸入好的郵箱傳送驗證碼APP原始碼
- win10自帶郵件怎麼新增qq郵箱_win10郵箱如何匯入qq郵箱Win10
- 實現動態自動匹配輸入的內容
- [應用案例]onethink郵箱找回密碼功能已實現密碼
- 實現多子型別輸入法:如何在 HarmonyOS中載入不同的輸入模式型別模式
- oracle資料庫自動發郵件實現報警功能Oracle資料庫
- 不停要求輸入郵箱密碼如何解決密碼
- 自動註冊gmail郵箱構想AI
- 關於QQ郵箱登入提示一鍵登入解決方案
- Jenkins實現CICD之郵箱告警Jenkins
- MySQL 自動備份併傳送到郵箱MySql
- Springboot實現基於字首的自定義配置和自動提示功能Spring Boot
- SharedPreferences實現記住密碼----自動登入功能密碼
- 電子郵箱是qq郵箱嗎 電子郵箱和qq郵箱的區別聯絡介紹
- 工作郵箱怎麼註冊?企業郵箱有哪些功能?
- Java基本型別自動裝箱的效能成本 -Coffee TalkJava型別
- qq郵箱怎麼發檔案給別的郵箱 qq郵箱如何將文件傳送給別人
- 實現郵箱的已讀回執
- 使用zabbix實現郵箱/釘釘告警
- QQ郵箱正確輸入方式怎麼寫的 qq郵箱地址格式是qq號和什麼
- TS 分析字串實現 Commander.js 自動強型別字串JS型別
- Laravel 實現使用者名稱 + 郵箱 + 手機號登入Laravel
- Vue實現自動觸發功能Vue
- 【搜尋引擎】Solr Suggester 實現全文檢索功能-分詞和和自動提示Solr分詞
- 郵件營銷自動化:批次郵箱API傳送技巧與策略API
- Java實現網易企業163郵箱傳送郵件Java
- Java實現郵件推送功能Java
- JS實現發郵件功能JS
- Gitlab伺服器郵箱配置,實現自動為使用者傳送郵件(註冊傳送驗證連結)Gitlab伺服器
- win10郵件同步163郵箱的方法_win10郵件怎麼繫結163郵箱實現同步Win10
- Input-Source-Pro:自動切換輸入法並提示狀態
- 利用 Angular Directive 和 @HostBinding 實現輸入文字框隨著鍵盤輸入自動變色效果Angular