HTML自动跳出邮箱的相应格式,输入邮箱自动补全后缀效果代码实例

HtmlCssJs

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 += '';

}

list.html(html);

});

}

$(document).ready(function() {

inputList($("input"), $("#input_list"));

})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.9.0

输入邮箱自动补全后缀效果代码实例-www.sucainiu.com

积分说明：注册即送15牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！   充值积分   充值会员   更多说明»

代码描述：实现了输入邮箱后缀自动补全效果

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

代码注释:

(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 += '';

}，生成预设的邮箱后缀选项。

(9).list.html(html)，将邮箱后缀写入。