自动提示email输入功能

原创 2013年12月02日 18:18:51
<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

为程序添加自动发送Email功能

为程序添加自动发送Email功能   (2009-09-19 00:21:31) 转载▼ 标签:  smtp   email   it ...

jquery实现文本框Email自动提示后缀

最近因为项目需要,需要一个会自动提示Email后缀的文本框,在网络上面找了一些资料,把自己觉得比较好的记录下来,备后面不时之需:直接上代码 首先是页面代码: <% String path = req...

Andoid自动判断输入是电话,网址或者Email的方法----Linkify的应用!

本节要讲的是,当我们在一个EditText输入电话或者网址还是Email的时候,让Android自动判断,当我们输入的是电话,我们点击输入内容将调用打电话程序,当我们输入是网址点击将打开浏览器程序.而...

输入自动提示与补全功能的设计与实现

包含一个简短而完整的Web示例, 演示如何根据用户输入的字符进行自动提示和补全。

jQuery+PHP+Mysql实现输入自动完成提示的功能

本文将使用jquery ui的autocomplete插件,结合后端PHP,数据源通过PHP读取mysql数据表的数据。 我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)