Maison > interface Web > js tutoriel > Exemple de partage de code de la zone de saisie et de la zone candidate dans le développement de composants JavaScript

Exemple de partage de code de la zone de saisie et de la zone candidate dans le développement de composants JavaScript

黄舟
Libérer: 2017-03-21 14:30:34
original
1278 Les gens l'ont consulté

Cet article partagera avec vous l'exemple de code de zone de saisie et de zone candidate développé sur la base du composant js Le code est simple et facile à comprendre, très bon, et a une valeur de référence. en cas de besoin, vous pouvez y faire référence

1. Compatible avec ie8, principalement event compatible avec

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;
    }
   }
  }
Copier après la connexion

2. proxy pour le contenu dans la case candidat, et cliquez sur l'espace vide Disparaître

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 ='';
   }
  })
Copier après la connexion

3. Empêcher les bulles en mode de compatibilité

 function stopPropagation(e){
   e = window.event||e;
   if(document.all){
    e.cancelBubble = true;
   }else{
    e.stopPropagation();
   }
  }
Copier après la connexion

4. Image d'effet

Exemple de partage de code de la zone de saisie et de la zone candidate dans le développement de composants JavaScript

5. Code complet



 
  
  
  
 
 
 

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal