表单总结

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双击后显示输入过的内容

解决方法：

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:"[email protected]" ,value:"mailto:[email protected]"},
		{ label:"[email protected]" ,value:"mailto:[email protected]" },
		{ label:"[email protected]" ,value:"mailto:[email protected]" },
		{ label:"[email protected]" ,value:"mailto:[email protected]" },
		{ label:"[email protected]" ,value:"mailto:[email protected]" },
		{ label:"[email protected]" ,value:"mailto:[email protected]" },
		{ label:"[email protected]" ,value:"mailto:[email protected]" },

	];
	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'+str+'';
						})
						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);
	})