邮箱输入实现类型自动提示功能
分类：实例代码
现在网站都在追求人性化，以期能够吸引或者留住用户。
下面分享一个这方面的实例，那就是当用户在输入邮箱的时候，能够自动提示邮箱的类型，这就免去了输入是何种类型邮箱的麻烦。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.demo p {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.input {
padding: 12px;
width: 300px;
border: 1px solid #c2c2c2;
border-radius: 4px;
box-shadow: 0 0 1px #fff, inset 0 0 2px rgba(0,0,0,.15);
background-color: #F2F2F2;
font-size: 14px;
}
.emailist {
border: 1px solid #bdbdbd;
border-radius: 4px;
background-color: #fff;
color: #666;
font-size: 14px;
list-style-type: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.emailist li {
padding: 2px 11px;
cursor: pointer;
}
.emailist .on, .emailist li:hover {
background-color: #eee;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
(function ($) {
$.fn.mailAutoComplete = function (options) {
var defaults = {
className: "emailist",
email: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "live.com", "sohu.com", "sina.com"],
zIndex: 11
};
// 最终参数
var params = $.extend({}, defaults, options || {});
// 是否现代浏览器
var isModern = typeof window.screenX === "number", visibility = "visibility";
// 键值与关键字
var key = {
"up": 38,
"down": 40,
"enter": 13,
"esc": 27,
"tab": 9
};
// 组装HTML的方法
var fnEmailList = function (input) {
var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = [];
$.each(params.email, function (index, email) {
if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) {
arrEmailNew.push(email);
}
});
$.each(arrEmailNew, function (index, email) {
htmlEmailList = htmlEmailList + '<li' + (input.indexSelected === index ? ' class="on"' : '') + '>' + arrValue[0] + "@" + email + '</li>';
});
return htmlEmailList;
};
// 显示还是隐藏
var fnEmailVisible = function (ul, isIndexChange) {
var value = $.trim(this.value), htmlList = '';
if (value === "" || (htmlList = fnEmailList(this)) === "") {
ul.css(visibility, "hidden");
}
else {
isIndexChange && (this.indexSelected = -1);
ul.css(visibility, "visible").html(htmlList);
}
};
return $(this).each(function () {
this.indexSelected = -1;
// 列表容器创建
var element = this;
var eleUl = $('<ul></ul>').css({
position: "absolute",
marginTop: element.offsetHeight,
minWidth: element.offsetWidth - 2,
visibility: "hidden",
zIndex: params.zIndex
}).addClass(params.className).bind("click", function (e) {
var target = e && e.target;
if (target && target.tagName.toLowerCase() === "li") {
$(element).val(target.innerHTML).trigger("input");
$(this).css(visibility, "hidden");
element.focus(); // add on 2013-11-20
}
});
$(this).before(eleUl);
// IE6的宽度
if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); }
// 不同浏览器的不同事件
isModern ? $(this).bind("input", function () {
fnEmailVisible.call(this, eleUl, true);
}) : element.attachEvent("onpropertychange", function (e) {
if (e.propertyName !== "value") return;
fnEmailVisible.call(element, eleUl, true);
});
$(document).bind({"click": function (e) {
var target = e && e.target, htmlList = '';
if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) {
eleUl.css(visibility, "visible").html(htmlList);
}
else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) {
eleUl.css(visibility, "hidden");
}
},
"keydown": function (e) {
var eleLi = eleUl.find("li");
if (eleUl.css(visibility) === "visible") {
switch (e.keyCode) {
case key.up: {
element.indexSelected--;
if (element.indexSelected < 0) {
element.indexSelected = -1 + eleLi.length;
}
e.preventDefault && e.preventDefault();
break;
}
case key.down: {
element.indexSelected++;
if (element.indexSelected >= eleLi.length) {
element.indexSelected = 0;
}
e.preventDefault && e.preventDefault();
break;
}
case key.enter: {
e.preventDefault();
eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html());
eleUl.css("visibility", "hidden");
break;
}
case key.tab: case key.esc: {
eleUl.css("visibility", "hidden");
break;
}
}
if (element.indexSelected !== -1) {
eleUl.html(fnEmailList(element));
}
}
}
});
});};
})(jQuery);
$(document).ready(function () {
$(".inputMailList").mailAutoComplete();
})
</script>
</head>
<body>
<div class="demo">
<p><input type="email" class="input inputMailList" name="email" placeholder="请输入邮箱" ></p>
</div>
</body>
</html>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu