html5data兼容性,HTML5 datalist与动态邮箱地址（兼容IE）效果演示 » 张鑫旭-鑫空间-鑫生活...

HTML代码：

邮箱：

JS代码：

document.createElement("datalist");

var eleList = document.getElementById("emailList")

, eleMail = document.getElementById("email");

if ("placeholder" in document.createElement("input")) {

// 得到类似["qq.com", "163.com", "gmail.com", ...]的数据

var arrEmailList = [].slice.call(eleList.getElementsByTagName("option")).map(function(option) {

return option.value.replace("*@", "");

}), htmlListInit = eleList.innerHTML;

eleMail.fnListReplace = function() {

var arrValue = this.value.trim().split("@");

// 修复FireFox浏览器下无限input问题

// 如果值不完全匹配某option值，执行动态替换

if (arrValue.length !== 2 || arrEmailList.indexOf(arrValue[1]) === -1) {

eleList.innerHTML = htmlListInit.replace(/\*/g, arrValue[0]);

}

return this;

};

// 绑定输入事件侦听

eleMail.addEventListener("input", function() {

this.fnListReplace.call(this);

}, false);

// 载入即匹配

eleMail.fnListReplace.call(eleMail).focus();

} else {

// IE6-9浏览器

var option = eleList.getElementsByTagName("option"), eleSelect = null, indexOption = -1

, arrEmailList = (function() {

var arr = [], index = 0, length = option.length;

for (; index < length; index+=1) {

arr.push(option[index].value);

}

return arr;

})();

eleMail.parentNode.insertBefore(eleList, eleMail);

eleMail.fnListReplace = function() {

var htmlNewOption = '', value = this.value, arrValue = value.split("@"), lengthOption = 0;

for (var index = 0; index

if (arrValue.length !== 2 ||

arrValue[1] === "" ||

arrEmailList[index].replace("*@", "").indexOf(arrValue[1]) === 0

) {

htmlNewOption = htmlNewOption +

''+

arrEmailList[index] +

'';

lengthOption++;

}

}

eleList.style.visibility = value && htmlNewOption? "visible": "hidden";

eleList.innerHTML = (lengthOption == 1?

'' :

'') +

htmlNewOption.replace(/\*/g, arrValue[0]) +

'';

// 三个全局变量重置

eleSelect = eleList.getElementsByTagName("select")[0];

option = eleList.getElementsByTagName("option");

indexOption = -1;

// 宽度

if (this.offsetWidth > eleSelect.offsetWidth) {

eleSelect.style.width = this.offsetWidth;

} else {

eleSelect.style.width = '';

}

};

// 样式

var style = {

position: "absolute",

marginTop: eleMail.offsetHeight,

visibility: "hidden"

}, key;

for (key in style) {

eleList.style[key] = style[key];

}

// 事件

eleMail.attachEvent("onpropertychange", function() {

if (e && e.propertyName == "value") {

eleMail.fnListReplace.call(eleMail);

}

});

// 键盘上下

eleMail.attachEvent("onkeyup", function(e) {

switch(e.keyCode) {

case 38: {

indexOption--;

if (indexOption < 0) {

indexOption = -1 + option.length;

}

break;

}

case 40: {

indexOption++;

if (indexOption >= option.length) {

indexOption = 0;

}

break;

}

case 13: {

if (indexOption !== -1) {

eleMail.value = eleSelect.value;

}

eleList.style.visibility = "hidden";

break;

}

}

option[indexOption] && (option[indexOption].selected = "selected");

});

document.body.attachEvent("onmouseup", function(event) {

if (!event) return;

var target = event.srcElement || event.target;

if (target && target != eleMail && target.parentNode != eleSelect) {

eleList.style.visibility = "hidden";

}

});

eleMail.fnListReplace.call(eleMail);

// 选中

eleList.attachEvent("onclick", function() {

eleMail.value = eleSelect.value;

eleList.style.visibility = "hidden";

});

}