本文给大家分享基于js组件开发的输入框加候选框的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下'+array[i]+' ';
}
datalist.innerHTML = _innerHTML;
}
function findInArray(s){
var filter_array = [];
if(s!=''){
for (var i = 0; i 0){
setTimeout(function(){datalist.style.visibility = 'visible';},0);
}else{
setTimeout(function(){datalist.style.visibility = 'hidden';},0);
}
}
EventUtil.on(document.body,'click',function(e){
stopPropagation(e);
if(EventUtil.getTarget(e).nodeName=='BODY'){
datalist.style.visibility = 'hidden';
datalist.innerHTML ='';
}
if(EventUtil.getTarget(e).nodeName == "LI"){
input.value = EventUtil.getTarget(e).innerHTML;
datalist.style.visibility = 'hidden';
datalist.innerHTML ='';
}
})
1.兼容ie8 主要是事件兼容
var EventUtil = { on:function(elem,type,handler){ if(elem.addEventListener){ elem.addEventListener(type,handler,false); }else if(elem.attachEvent){ elem.attachEvent("on"+type,handler); } }, getEvent:function(event){ return event||window.event; }, getTarget:function(event){ return event.target||event.srcElement; }, getCharCode:function(event){ if(typeof event.handler == "number"){ return event.charCode; }else{ return event.keyCode; } } }
2.对于候选框里面的内容使用事件代理,以及点击空白处消失
EventUtil.on(document.body,'click',function(e){ stopPropagation(e); if(EventUtil.getTarget(e).nodeName=='BODY'){ datalist.style.visibility = 'hidden'; datalist.innerHTML =''; } if(EventUtil.getTarget(e).nodeName == "LI"){ input.value = EventUtil.getTarget(e).innerHTML; datalist.style.visibility = 'hidden'; datalist.innerHTML =''; } })
3.兼容模式下的防止冒泡
function stopPropagation(e){ e = window.event||e; if(document.all){ e.cancelBubble = true; }else{ e.stopPropagation(); } }
4.效果图
5.完整代码
html,body{margin: 0;padding: 0;height: 100%;width: 100%;} input{ width: 200px; border:1px solid grey; padding: 0 2px; line-height: 1.5rem; box-sizing: border-box; outline: none; } ul{ margin:0; width: 200px; padding: 0; list-style: none; box-sizing: border-box; padding: 1px; border:1px solid; border-color: grey; visibility: hidden; } li{ line-height: 1.5rem; padding: 0 0 0 1px; } li:hover{ background-color: grey; } .section{ top:30%; left:50%; position: absolute; margin-left: -100px; }
以上就是JavaScript组件开发之输入框加候选框的示例代码分享的详细内容,更多请关注php中文网其它相关文章!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)