产品反馈用户总是输错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邮箱'}]。
一个完整调用实例：
提示：可修改后代码再运行!
以上是内存溢出为你收集整理的html5给文本框实现email域名自动完成效果全部内容，希望文章能够帮你解决html5给文本框实现email域名自动完成效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）