suchen

Heim  >  Artikel  >  Web-Frontend  >  Vollständiges Beispiel für Javascript-Fähigkeiten zur automatischen Fokussteuerung

Vollständiges Beispiel für Javascript-Fähigkeiten zur automatischen Fokussteuerung

WBOY
WBOYOriginal
2016-05-16 15:16:291393Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum automatischen Umschalten der Fokussteuerung mithilfe von JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    var EventUtil = {
      addHandler: function(element,type, handler){
        if(element.addEventListener){
          element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
          element.attachEvent("on"+type,handler);
        }else{
          element["on"+type]=null;
        }
      },
      removeHandle:function(element,type,handler){
        if(element.removeEventListener){
          element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
          element.detachEvent("on"+type,handler);
        }
      },
      getEvent:function(event){
        return event &#63; event:window.event;
      },
      getTarget:function(event){
        return event.target || event.srcElement;
      },
      preventDefault:function(event){
        if(event.preventDefault){
          event.preventDefault();
        }else{
          event.returnValue=false;
        }
      },
      stopPropagation:function(event){
       if(event.stopPropagation){
         event.stopPropagation();
       }else{
         event.cancelBubble=true;
       }
      }
    };
    var dom_text1=document.getElementById("text1");
    var dom_text2=document.getElementById("text2");
    var dom_text3=document.getElementById("text3");
    function switchFocus(event){
      event=EventUtil.getEvent(event);
      var target=EventUtil.getTarget(event);
      if(target.value.length==target.maxLength){
        var form=target.form;
        for(var i=0;i<form.elements.length;i++){
          if(form.elements[i]==target){
            form.elements[i+1].focus();
            return;
          }
        }
      }
    }
    EventUtil.addHandler(dom_text1,"keyup",switchFocus);
    EventUtil.addHandler(dom_text2,"keyup",switchFocus);
    EventUtil.addHandler(dom_text3,"keyup",switchFocus);
  })
  </script>
</head>
<body>
  <form id="form1">
    <input type="text" maxlength="3" id="text1"/>
    <input type="text" maxlength="3" id="text2"/>
    <input type="text" maxlength="3" id="text3"/>
  </br>
  <input type="text" />
  </form>
</body>
</html>

Leser, die an mehr JavaScript-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Spezialeffekte und Techniken der JavaScript-Animation“, „Javascript objektorientiertes Einführungs-Tutorial “ und „Zusammenfassung der JavaScript-Datenstruktur und Algorithmusfähigkeiten》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript-Methode zum Abrufen des Verzeichnisses, in dem sich die aktuell ausgeführte Skriptdatei befindet_Javascript-TippsNächster Artikel：JavaScript-Methode zum Abrufen des Verzeichnisses, in dem sich die aktuell ausgeführte Skriptdatei befindet_Javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen