jQuery插件：表单Email常⽤邮箱选择控件jQuery插件：表单Email常⽤邮箱选择控件
先上截图：
⽤法：
jquery下载文件插件$(selector).emailSelector(emailType);
//emailType（可选），是⼀个数组，作为提⽰邮箱的类型
//如：['@qq','@gmail','@163']
//注意：绑定input的⽗元素必须为相对定位
JS代码：
(function($) {
/**
* @param {Array} emailType Email类型, eg:['@qq','@163']
*/
$.fn.emailSelector = function(emailType) {
var $input = this;
var input = $input[0];
var $parent = $input.parent();
var $ul = $('<ul></ul>');
var _emailType; //真正⽤来遍历的数组
var index = 0; //激活的li的索引
//必须绑定在input标签上
if (UpperCase() !== 'INPUT') {
throw new Error('必须绑定在input标签上')
}
//⽗元素必须是相对定位
if ($parent.css('position') !== 'relative') {
throw new Error('input的⽗元素必须是相对定位');
}
//设置默认邮箱类型
if (!emailType || !$.isArray(emailType) || emailType.length === 0) {
emailType = [
'',
'@qq',
'@163',
'@126',
'@gmail',
'@sina',
'@sohu',
'@139'
];
} else {
emailType.unshift('');
}
//添加到⽗节点上
$input.attr('autocomplete','off');
$ul.css({top: $input.css('height')});
$ul.addClass('emailSelector');
$parent.append($ul);
//绑定事件
$(document).on('mouseup', function() {
$ul.hide();
});
$ul.on('mouseover', 'li', function(e) {
var target = e.target;haunts
index = $(target).attr('data-index') - 0;
setActive();
});
$ul.on('click', 'li', function(e) {
$input.val(e.target.innerHTML);
$ul.hide();
});
$('keyup', function(e) {
/
/up
if (e.keyCode == 38) {
if (index <= 0) {
index = _emailType.length - 1;
} else {
index--;
}
invalid originsetActive();
}
//down
else if (e.keyCode == 40) {
if (index >= _emailType.length - 1) {
index = 0;
} else {
index++;
}
setActive();
}
//enter
else if (e.keyCode == 13) {
$input.val($ul.find('li').eq(getIndex()).text());
$ul.hide();
}微服务网关组件
//输⼊
else {
$ul.show();
var text = $input.val().trim();
if (text.length > 0 && text.indexOf('@') == -1) {
_emailType = emailType;
init(text);
} else if (text.length > 0 && text.indexOf('@') > 0) { var i = text.indexOf('@');
var type = text.substr(i);
_emailType = emailType.filter(function(t) {
if (t.indexOf(type) != -1) return true;
});
init(text, type);
} else {
}
}
});
//初始化DOM
function init(text, replace) {
$ul.html('');
index = 0;
if (replace !== undefined) {
text = place(replace, '');
}
$.each(_emailType, function(i, type) {
type = String().trim();
var $li = $('<li>' + text + type + '</li>');
$li.attr('data-index', i);
if (i == index) {
$li.addClass('active');
}
$ul.append($li);
});
}
//设置激活样式
function setActive() {
$ul.find('li').removeClass('active');
$ul.find('li').eq(getIndex()).addClass('active');
}
//获取Index
function getIndex() {
if (index < 0) {
return0;
} else if (index >= _emailType.length) {
return _emailType.length - 1;
} else {
return index;
}
}
}
})(jQuery);
CSS代码：
position: absolute;
list-style: none;
background-color:#fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
mybatisplus介绍display: none;
margin: 0;
padding: 0;
min-width: 240px;
border-radius: 5px;
}
background-color:#fff;
color:#333;
font-family: Arial, "微软雅⿊";
padding: 5px 15px;
cursor: pointer;
}
/* 激活样式可以根据⾃⼰需要修改 */
background-color:#09c;
color:#fff;
}
HTML⽰例代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email常⽤邮箱选择控件</title>
<link rel="stylesheet"href="ailSelector.css"/><!-- 引⼊css⽂件 -->
<script src="jquery.min.js"></script><!-- 引⼊jquery⽂件 -->
<script src="ailSelector.js"></script><!-- 引⼊js⽂件 -->
</head>
<body>
<!-- 注意：这⾥必须为相对定位 -->
<div >
<input type="text"id="email"/>
</div>
eyoucms去版权<script>
$('#email').emailSelector();
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。