jQuery 郵箱輸入字尾自動補全
分享一段程式碼例項,它實現了輸入郵箱字尾自動補全效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> function inputList(input, list) { var mailBox = [ "@qq.com", "@sina.com", "@163.com", "@126.com", "@yahoo.com.cn", "@gmail.com", "@sohu.com" ]; input.bind('input propertychange', function() { var key = input.val(); if (key.indexOf("@") != -1) { key = key.slice(0, key.indexOf("@")); } var mailBoxLen = mailBox.length; var html = ""; for (var index = 0; index < mailBoxLen; index++) { html += '<option value="' + key + mailBox[index] + '"></option>'; } list.html(html); }); } $(document).ready(function() { inputList($("input"), $("#input_list")); }) </script> </head> <body> <input type="text" list="input_list" name="text" placeholder="請輸入郵箱" /> <datalist id="input_list"></datalist> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).function inputList(input, list) {},第一個引數是jquery獲取的文字框物件,第二個引數是與第一個引數關聯的datalist物件。
(2).var mailBox = [
"@qq.com",
"@sina.com",
"@163.com",
"@126.com",
"@yahoo.com.cn",
"@gmail.com",
"@sohu.com"
],儲存郵箱字尾的陣列。
(3).input.bind('input propertychange', function() {}),為文字框註冊propertychange事件處理函式;文字框內容發生變化就會觸發此事件。
(4).var key = input.val(),獲取文字框的值。
(5). if (key.indexOf("@") != -1) {
key = key.slice(0, key.indexOf("@"));
},如果輸入的字串有@符號,那麼就在刪除這個@,否則的話再加上預設郵箱字尾,就會出現兩個@符號。
(6).var mailBoxLen = mailBox.length,將陣列的長度存入指定變數。
(7).var html = "",清空內容,防止前後內容疊加。
(8).for (var index = 0; index < mailBoxLen; index++) {
html += '<option value="' + key + mailBox[index] + '"></option>';
},生成預設的郵箱字尾選項。
(9).list.html(html),將郵箱字尾寫入。
二.相關閱讀:
(1).indexOf()可以參閱JavaScript indexOf()一章節。
(2).slice()可以參閱JavaScript slice()一章節。
(3).html()可以參閱jQuery html()方法一章節。
(4).datalist可以參閱HTML5 <datalist>標籤一章節。
相關文章
- 郵箱輸入自動補全jquery外掛程式碼例項jQuery
- jquery 實現郵箱輸入自動提示功能jQuery
- jquery 自動補全jQuery
- 郵箱輸入實現型別自動提示功能型別
- JS輸入框郵箱自動提示(帶有demo和原始碼)JS原始碼
- win10自帶郵箱無法登入QQ郵箱Win10
- 直播app原始碼,驗證方式選擇郵箱驗證時,自動給輸入好的郵箱傳送驗證碼APP原始碼
- QT學習筆記(三)單行文字輸入框與自動補全QT筆記
- win10自帶郵件怎麼新增qq郵箱_win10郵箱如何匯入qq郵箱Win10
- pycharm 如何自動補全PyCharm
- mac git 自動補全MacGit
- 字尾自動機學習
- 自動註冊gmail郵箱構想AI
- 不停要求輸入郵箱密碼如何解決密碼
- [譯] 自動補全規則
- 終端自動補全命令
- Python的自動補全Python
- Docker自動補全容器名Docker
- QlineEdit輸入字元奇怪自動補全上一次字元而且交叉影響字元
- MySQL 自動備份併傳送到郵箱MySql
- jQuery輸入時間日期自動格式化效果jQuery
- Vue中實現輸入框的自動補全功能Vue
- Laravel artisan bash 命令自動補全Laravel
- fish shell 自動補全子命令
- python之 自動補全 tabPython
- Docker 命令自動補全?要的Docker
- CSS 也能自動補全字串?CSS字串
- vim自動補全外掛配置
- 字尾自動機學習筆記筆記
- jQuery郵箱格式驗證程式碼jQuery
- 【新特性速遞】數字輸入框的字首和字尾(位於輸入框內部)
- jQuery實現使用者輸入自動完成功能jQuery
- QQ郵箱正確輸入方式怎麼寫的 qq郵箱地址格式是qq號和什麼
- Linux設定python自動tab自動補全LinuxPython
- MySQL資料庫自動補全命令MySql資料庫
- Python如何設定自動補全?Python
- vim自動補全外掛-NeoComplCache
- phpmyadmin主機名自動補全PHP