郵箱輸入實現型別自動提示功能
現在網站都在追求人性化,以期能夠吸引或者留住使用者。
下面分享一個這方面的例項,那就是當使用者在輸入郵箱的時候,能夠自動提示郵箱的型別,這就免去了輸入是何種型別郵箱的麻煩。
程式碼例項如下:
[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
- JS輸入框郵箱自動提示(帶有demo和原始碼)JS原始碼
- jQuery 郵箱輸入字尾自動補全jQuery
- 郵箱輸入自動補全jquery外掛程式碼例項jQuery
- Java實現郵箱驗證碼功能Java
- jQuery實現使用者輸入自動完成功能jQuery
- Vue中實現輸入框的自動補全功能Vue
- Laravel 專案實現郵箱驗證功能Laravel
- js實現的文字框輸入內容自動提示效果程式碼JS
- win10自帶郵箱無法登入QQ郵箱Win10
- 直播app原始碼,驗證方式選擇郵箱驗證時,自動給輸入好的郵箱傳送驗證碼APP原始碼
- win10自帶郵件怎麼新增qq郵箱_win10郵箱如何匯入qq郵箱Win10
- ASP.NET自動傳送郵件功能的實現ASP.NET
- 實現動態自動匹配輸入的內容
- 檢測郵箱是否是QQ郵箱並給出提示
- [Python爬蟲] Selenium實現自動登入163郵箱和Locating Elements介紹Python爬蟲
- 自動註冊gmail郵箱構想AI
- 不停要求輸入郵箱密碼如何解決密碼
- Python+django實現郵箱驗證登入PythonDjango
- oracle資料庫自動發郵件實現報警功能Oracle資料庫
- 完美主義:實現iOS輸入框自動移動iOS
- [應用案例]onethink郵箱找回密碼功能已實現密碼
- AirNet相似航班號自動識別提示功能AI
- MySQL 自動備份併傳送到郵箱MySql
- 實現輸入內容提示的功能(仿google_百度輸入框提示)jquery.ui.autocomplete.js外掛GojQueryUIJS
- 關於QQ郵箱登入提示一鍵登入解決方案
- 電子郵箱是qq郵箱嗎 電子郵箱和qq郵箱的區別聯絡介紹
- 工作郵箱怎麼註冊?企業郵箱有哪些功能?
- Java基本型別自動裝箱的效能成本 -Coffee TalkJava型別
- C#實現自動發郵件C#
- 輸入TIMESTAMP型別型別
- qq郵箱怎麼發檔案給別的郵箱 qq郵箱如何將文件傳送給別人
- 實現郵箱的已讀回執
- jquery實現仿郵箱收件人jQuery
- 手機號/郵箱 用*替代實現
- 使用zabbix實現郵箱/釘釘告警
- QQ郵箱正確輸入方式怎麼寫的 qq郵箱地址格式是qq號和什麼
- SharedPreferences實現記住密碼----自動登入功能密碼