Home » Code » 邮箱登陆下拉建议

邮箱登陆下拉建议

作为优化用户体验的一部分,使用邮箱登陆时一般都会下拉提示常用邮箱的域名部分(就是@及其后面部分),方便用户通过键盘上下键或鼠标点击快速完成输入。难点在当用户输入了@后需要通过正则筛选后缀部分。参考自妙味课堂(这里边的js感觉挺靠谱),采用面向对象的写法(当然比较简单的),部分代码按自己想法”优化”了一下。

html布局

简单至极,显示只需要一个input框和一个ul列表:

<div id="wrap">
	<input type="text" id="input" name="input" placeholder="请输入邮箱">
	<ul class="suggestion" id="suggestion" style="display:none">
		<li class="note">请选择邮箱类型</li>
		<li class=""></li>
		<li email="@qq.com" class="item">@qq.com</li>
		<li email="@163.com" class="item">@163.com</li>
		<li email="@189.com" class="item">@189.com</li>
		<li email="@126.com" class="item">@126.com</li>
		<li email="@sina.com" class="item">@sina.com</li>
		<li email="@gmail.com" class="item">@gmail.com</li>
		<li email="@hotmail.com" class="item">@hotmail.com</li>
		<li email="@live.cn" class="item">@live.cn</li>
		<li email="@yahoo.cn" class="item">@yahoo.cn</li>
	</ul>
</div>

javascript部分

<script type="text/javascript">
	window.onload = function(){
		var s = new Suggest();
		s.init();//初始化
	}

	function Suggest(){
		this.input = document.getElementById("input");
		this.ul = document.getElementById("suggestion");
		this.liList = this.ul.getElementsByTagName("li");
		this.length = this.liList.length;
		this.inow;
	}
	Suggest.prototype = {
		init: function(){				
			this.change();				
		},
		change: function(){

			var This = this;
			this.input.oninput = function(){
				console.log('oninput');
				This.showUl();
				This.tips();//提示
				This.sel();//默认选择第一个
			}
			this.input.onfocus = function(){

				if(this.value.trim() === ""){
					return;
				}
				This.showUl();
				This.tips();//提示
				This.selThis(1);//选择第一个
			}
			this.input.onblur = function(){
				This.hideUl();
			}
		},
		showUl: function(){
			this.ul.style.display = "block";
		},
		hideUl: function(){
			this.ul.style.display = "none";
		},
		tips: function(){
			var value = this.input.value;
			var liCount = this.liList.length;
			var reg = new RegExp('@' + value.substring(value.indexOf('@')+1));
			//截取第一个@及其后面的部分
			//先全部显示,否则一次性清空时没有显示
			for(var i = 1; i < liCount; i++){
				this.liList[i].style.display = "block";
			}
			if(reg.test(value)){
				for(var i = 1; i < liCount; i++){
					var email = this.liList[i].getAttribute("email");
					if(i == 1){
						this.liList[i].innerHTML = value;
					}else{
						if(reg.test(email)){
							this.liList[i].style.display = "block";
						}else{
							this.liList[i].style.display = "none";
						}

					}
				}
			}else{
				for(var i = 1; i < liCount; i++){
					var email = this.liList[i].getAttribute("email");
					if(!email){
						this.liList[i].innerHTML = value;
					}else{
						this.liList[i].innerHTML = value + email;
					}
				}
			}

		},
		sel: function(){
			var This = this;
			this.selThis(1);
			for(var i = 1; i < this.length; i++){
				this.liList[i].index = i;
				this.liList[i].onmouseover = function(){
					for(var i = 0; i < This.length; i++){
						This.liList[i].className = 'item';
					}
					this.className = 'active';
					This.inow = this.index;
				}
				this.liList[i].onmousedown = function(){
					This.input.value = this.innerHTML;
				}

			}
			this.input.onkeydown = function(e){
				var e = e || window.event;
				if(e.keyCode === 40){//上
					This.inow++;
					if(This.inow > This.length - 1){
						This.inow = 1;
					}
					This.selThis(This.inow);
				}else if(e.keyCode === 38){//下
					This.inow--;
					if(This.inow < 1){
						This.inow = This.length - 1;
					}
					This.selThis(This.inow);
				}else if(e.keyCode === 13){
					This.input.value = This.liList[This.inow].innerHTML;
					This.input.blur();//手动触发失去焦点事件
				}
			}
		},
		selThis: function(index){
			this.inow = index;
			if(this.input.value === ''){
				this.liList[1].className = 'item';
			}else{
				for(var i = 0; i < this.length; i++){
					this.liList[i].className = 'item';
				}
				this.liList[index].className = 'active';
			}
		}
	}
</script>

对于javascript的面向对象,还是有不少东西需要学的。虽然依然是继承,实例化,对象克隆遍历这些。如果使用jquery,那方便不少,因为很多工具类的函数都帮封装好了。如果是javascript,首先你得封装一堆常用函数,例如遍历,克隆,事件绑定等等,还有dom操作,那是相当繁琐的了。

查看简陋demo

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.