Vollständiges Beispiel für Javascript-Fähigkeiten zur automatischen Fokussteuerung-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:16:29

Original

1394 Leute haben es durchsucht

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>

Nach dem Login kopieren

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.