產品反饋用戶總是輸錯email的域名，因此服務器得到的email的地址是錯誤的。比如，有許多用戶總將xxx@qq.com輸入成xxx@qq.con。
這讓后端很煩惱，因為這個email地址是合法的，但是錯誤也是那么明顯的（常識判斷，至於qq.con域名是否存在我也不知道）。
為了解決這個錯誤，下午折騰了一小時，使用到了html5 input里的新的list屬性，當用戶輸入'@'后為用戶提示域名信息。如圖:
但是后來悲劇的發現這個屬性在safari中不支持，從而在App中也無法支持，估計只能在chrome中使用了。就當學習了。貼上代碼，大致思路是監聽用戶輸入'@'后，構造datalist，並關聯到input上。依賴jquery。
(function(){ var emails = [{domain: '@qq.com', label: 'qq郵箱'}, {domain: '@163.com', label: '163郵箱'}, {domain: '@126.com', label: '126郵箱'}, {domain: '@hotmail.com', label: 'hotmail郵箱'}, {domain: '@sina.com', label:'sina郵箱'}, {domain: '@gmail.com',label:'gmail郵箱'}, {domain: '@139.com', label: '139郵箱'}, {domain:'@yahoo.com.cn', label: 'yahoo中國郵箱'}]; var addEmailHelp = function(id, otherAddress){ var inputObj = $('input#' + id); if(inputObj.length == 0){ return; } inputObj.keyup(function (ev) { var val = $(inputObj).val(); var lastInputKey = val.charAt(val.length - 1); if (lastInputKey == '@') { var indexOfAt = val.indexOf('@'); var username = val.substring(0, indexOfAt); if ($('datalist#emailList').length > 0) { $('datalist#emailList').remove(); } $(inputObj).parent().append('<datalist id="emailList"></datalist>'); for (var i in emails) { $('datalist#emailList').append('<option value="' + username + emails[i].domain + '" label="' + emails[i].label + '" />'); } if(otherAddress != null && typeof otherAddress != 'undefined'){ for (var i in otherAddress) { $('datalist#emailList').append('<option value="' + username + otherAddress[i].domain + '" label="' + otherAddress[i].label + '" />'); } } $(inputObj).attr('list', 'emailList'); } }) }; window.addEmailHelp = addEmailHelp; })();
使用方法是為先為input設置一個id，然后用addEmailHelp(id, otherAddress)關聯它，這個函數已經默認關聯上了一些常用的郵箱域名。
otherAdress可以為其關聯上自定義的其他地址，調用函數時這個參數可以為空。
一個otherAddress實例： [{domain:'@xxx.com', label: 'xxx郵箱'}, {domain: '@yyy.com', label: 'yyy郵箱'}]。
一個完整調用實例：
<html> <head> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="test.js"></script> <script type="text/javascript"> $(document).ready(function(){ addEmailHelp('test'); }); </script> </head> <body> email : <input id="test" type="text" required/> </body> </html>