Rumah > hujung hadapan web > tutorial js > JavaScript组件开发之输入框加候选框的示例代码分享

JavaScript组件开发之输入框加候选框的示例代码分享

黄舟
Lepaskan: 2017-03-21 14:30:34
asal
1356 orang telah melayarinya

本文给大家分享基于js组件开发的输入框加候选框的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下

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;
    }
   }
  }
Salin selepas log masuk

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 ='';
   }
  })
Salin selepas log masuk

3.兼容模式下的防止冒泡

 function stopPropagation(e){
   e = window.event||e;
   if(document.all){
    e.cancelBubble = true;
   }else{
    e.stopPropagation();
   }
  }
Salin selepas log masuk

4.效果图

JavaScript组件开发之输入框加候选框的示例代码分享

5.完整代码



 
  
  
  
 
 
 

Salin selepas log masuk

Atas ialah kandungan terperinci JavaScript组件开发之输入框加候选框的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan