关闭

自动提示email输入功能

标签: 工作functionhtml
504人阅读 评论(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" />
<!-- Date: 2013-08-21 -->
</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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:24620次
    • 积分:1
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:25篇
    • 译文:0篇
    • 评论:7条
    文章分类