自动提示email输入功能

最新推荐文章于 2024-09-15 10:24:49 发布

warmersen

最新推荐文章于 2024-09-15 10:24:49 发布

阅读量1.1k

点赞数

分类专栏：对我有用文章标签：工作 function html

本文链接：https://blog.csdn.net/liuqiao1123/article/details/17077917

版权

对我有用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>new_file</title>
<meta name="author" content="EX-LIUQIAO001" />

</head>
<body>
<div id="content">
<input id="myInput" />
</div>
<script type="text/javascript">
var emailId = function(element){
this.element = element;
this.emailArr = ['@163.com','@tom.com','@sina.com','@yahoo.com.cn'];
this.input = null;
this.box = null;
this.liArr = [];
this.init();
}
emailId.prototype.init = function(){
var self = this;
var obj = this.input = document.getElementById(this.element);
if(obj.addEventListener){
obj.addEventListener('input',self.changeEvent,false);
}
if(obj.attachEvent){
obj.attachEvent('onpropertychange',self.changeEvent);
}
this.addEvent(obj,'blur',self.focusout);
this.createContent();
}

emailId.prototype.changeEvent = function(){
var str = this.input.value;
if(str.indexOf('@') == -1){
this.box.style.display = '';
for(var i=0;i<this.liArr.length;i++){
this.liArr[i].innerHTML = str + '@' + this.emailArr[i];
}
}
}

emailId.prototype.focusout = function(){
setTimeout(function(){this.box.style.display = 'none'},100);
}

emailId.prototype.createContent = function(){
this.box = document.createElement('div');
var content = document.getElementById('content');
content.appendChild(this.box);
var ul = document.createElement('ul');
this.box.appendChild(ul);
for(var i = 0;i< this.emailArr.length;i++){
var li = this.getLi();
li.innerHTML = this.emailArr[i];
this.liArr.push(li);
ul.appendChild(li);
}
}

emailId.prototype.addEvent = function(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}
if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}

emailId.prototype.getLi = function(){
var li = document.createElement('li');
this.addEvent(li,'mouseover',function(){
li.className = 'overli';
});
this.addEvent(li,'mouseout',function(){
li.className = 'outli';
});
this.addEvent(li,'click',function(){
this.input.value = li.innerHTML;
})
return li;
}
new emailId('myInput');
</script>
</body>
</html>