表单总结

css-去除input默认样式

1.问题：在写jquery-todulist时，input在focus下会默认有黄色背景（其实是浅黄色的box-shadow）。

原因：使用Chrome的都知道，当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的内阴影。

解决方法：

input:-webkit-autofill{
    -webkit-box-shadow:0 0 1000px white inset!important;
}

2.问题：给input一个border-radius时,outline会与边框不重合。

解决方法：

input{
    outline:none;
}
input:focus{
    border-color:#009dff;
}

   outline也可以给元素增加你希望的边框：

p {
  
    outline:#00FF00 dotted thick;
}

 

3.去除input双击后显示输入过的内容

解决方法：

<input autocomplete = "off">

blur事件与click冲突

• mousedown替代click事件
  • 事件顺序： mousedown -》 blur -》 click;
  • 缺点：mousedown时就立即执行，没法取消操作；
• mousedown与click同时使用
  • mousedown -》 e.preventDefault(); -》就可以取消blur事件；
  • click              -》 input.blur();
  • 优点：mousedown之后移动鼠标再抬起可以取消操作；

模拟datalist实现autoComplete

ul li 模拟datalist :核心代码：

	var data = [
		{ label:"gucong@gmail.com" ,value:"mailto:gucong@gmail.com"},
		{ label:"gucongbbs@163.com" ,value:"mailto:gucongbbs@163.com" },
		{ label:"gucong.student@sina.com" ,value:"mailto:gucong.student@sina.com" },
		{ label:"gucong520@hotmail.com" ,value:"mailto:gucong520@hotmail.com" },
		{ label:"gucong@foxmail.com" ,value:"mailto:gucong@foxmail.com" },
		{ label:"35803719@qq.com" ,value:"mailto:35803719@qq.com" },
		{ label:"64272001@qq.com" ,value:"mailto:64272001@qq.com" },

	];
	var $ = {
		el:function(s,elem){
			if(typeof s !== 'string'){
				return s;
			}else if(s.substr(0,1) == '.'){
				return (elem || document).getElementsByClassName(s.substr(1));
			}else if(s.substr(0,1) == '#'){
				return document.getElementById(s.substr(1));
			}else{
				return (elem || document).getElementsByTagName(s);
			}
		},
		id:function(id){
			return typeof id === 'string'?document.getElementById(id):id;
		},
		class:function(className,oParent){
			return (oParent||document).getElementsByClassName(className);
		},
		tag:function(tagName,oParent){
			return (oParent||document).getElementsByTagName(tagName);
		},
		on:function(elem,event,fn,bubble){
			return elem.addEventListener?elem.addEventListener(event,fn,bubble):elem.attachEvent(on+'event',fn);
		},
		index:function(elem,oParent){
			var oChildren = oParent || elem.parentNode.children,i;
			for(i=0;i<oChildren.length;i++){
				if(elem === oChildren[i]) return i;
			}
			return -1;
		},
		pageX: function(element) {
			return element.offsetLeft + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
		},
		pageY: function(element) {
			return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)	
		},
		removeAddClass:function(elem,className,add){
			var L = elem.parentNode.children;
			var i =0;
			var len = L.length;
			for(i;i<len;i++){
					L[i].className = L[i].className.replace(className,'');
					add && L[i] === elem && (L[i].className += className);
			}
		}
	}

	function autoComplete(){
		this.initialize.apply(this,arguments);
	}

	autoComplete.prototype = {
		initialize:function(id,data){
			this.wrap = $.el(id);
			this.data = data;
			this.render();

			$.on(this.wrap,'input',this.onChange.bind(this));
			$.on(this.wrap,'focus',this.onChange.bind(this));

			$.on(this.wrap,'blur',function(e){
				var U = $.class('autoEmailList')[0];
				U.style.display = 'none';
			},false);

			$.on(window,'keydown',this.onSelect.bind(this));

		},
				// 1. 对 input 框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input 框的下方； 
		// 2. 只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗；
		onChange:function(e){  
			var U = $.class('autoEmailList')[0];
			if(this.wrap.value){
				var L = $.tag('li',U);
				var match = new RegExp(this.wrap.value,'ig');
				for(var i=0;i<L.length;i++){
					var str = L[i].getAttribute('label');
					if(match.test(str)){
						L[i].innerHTML = str.replace(match,function(str){
							return '<b>'+str+'</b>';
						})
						L[i].style.display = 'block';
					}else{
						L[i].style.display = 'none';
					}
				}
				U.style.left = $.pageX(this.wrap) + 'px';
				U.style.top = $.pageY(this.wrap) + this.wrap.offsetHeight + 'px';
				U.style.display = 'block';
			}else{
				U.style.display = 'none';
			}
		},
		// 3. 支持key上下键选择与enter选种值
		onSelect:function(e){
			var e = e || window.event;
			var U = $.class('autoEmailList')[0];
			var l = $.class('highlight',U)[0];

			var index,iTarget;
			l && (index = $.index(l));

			if(U.style.display === 'none'){
				return;
			}else{
				switch(e.keyCode){
					case 38:
						e.preventDefault();
						// if(index == 0) return;
						!index  && (iTarget = $.class('autoEmailList')[0].lastChild);
											 
						index && (iTarget = l.previousSibling);

						while(iTarget.style.display === 'none'){
							iTarget = iTarget.previousSibling;
						}

						$.removeAddClass(iTarget,'highlight',true);
						break;
					//  down
					case 40:
						e.preventDefault();
						!index && index != 0 && (iTarget = $.class('autoEmailList')[0].firstChild);
						(index === 0 || index) && (iTarget = l.nextSibling);

						while(iTarget.style.display === 'none'){
							iTarget = iTarget.nextSibling;
							iTarget || (iTarget = $.class('autoEmailList')[0].firstChild);
						}

						$.removeAddClass(iTarget,'highlight',true);
						break;
					// enter;
					case 13:
						e.preventDefault();
						l && (this.wrap.value = l.getAttribute('label'),this.wrap.blur())
						break;
					default:
						break;
				}
			}
		},
		// hover改变className
		onHover:function(e){
			var e = e || window.event;
			var target = e.target || e.srcElement;
			if(target.nodeName.toLowerCase() === 'li'){
				$.removeAddClass(target,'highlight',true);
			}
		},
        // out移除className
		onOut:function(){
			var l = $.class('highlight')[0];
			l && $.removeAddClass(l,'highlight',false);
		},
        // 点击选择
		preventBlur:function(e){
			var e = e || window.event;
			e.preventDefault();
		},
		choseValue:function(e){
			var e = e || window.event;
			var target = e.target || e.srcElement;
			if(target.nodeName.toLowerCase() === 'li'){
				this.wrap.value = target.getAttribute('label');
				this.wrap.blur();
			}
		}
	}

	$.on(window,'load',function(){
		new autoComplete('#autoEmail',data);
	})

</script>
</html>