JavaScript自動切り替えフォーカス制御効果の完成例_JavaScriptスキル-jsチュートリアル-php.cn

JavaScript自動切り替えフォーカス制御効果の完成例_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:16:29

オリジナル

1403 人が閲覧しました

この記事の例では、JavaScriptを使用してフォーカス制御を自動で切り替える方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

<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>

ログイン後にコピー

JavaScript 関連のコンテンツに興味のある読者は、このサイトの特別トピック「JavaScript アニメーションの特殊効果とテクニックのまとめ」、「JavaScript オブジェクト指向入門チュートリアル」を参照してください。 " および "JavaScript のデータ構造とアルゴリズムのスキルのまとめ》

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。