JavaScript语法学习笔记之 鼠标及按键操作

本帖最后由 simonhehe 于 2011-08-04 18:12:11 编辑

解决方案 »

  1.   

    2 功能同上, 区别就是后者传入了对象.
    <html><head><title></title>
    <script language="javascript">
        <!--
            function checkShift(e){
                var sft = "none";
                if(e.shiftKey||e.shiftKey){
                    sft = "shift";
                }
                document.getElementById("txt1").value = sft;
                checkShift2(e);
            }
            
            function checkShift2(e){            
                var srcElement = e.srcElement;
                if (!srcElement) {
                   srcElement = e.target;
                }            
                document.getElementById("txt2").value = srcElement.getAttribute("name");
            }
        //-->
    </script>
    </head><body onclick="checkShift(event);" >
    <img src="black_creature.png" name="img1"/>
    <img src="BlackPower_creature.png" name="img2"/>
    <input type="text" id="txt1" name="txt1" value="">
    <input type="text" id="txt2" name="txt2" value=""></body></html>
      

  2.   

    3 只允许输入数字的文本框,   jquery版
    <html><head>
    <script type="text/javascript" src="jquery.js"></script>
    <title></title></head>
    <body>
    <input type = "text" id = "txt1" value="1234567890"></input>
    <input type = "text" id = "txt2"></input>
    </body>
    <script language="javascript">
    var token = true;
    document.onkeydown=function(e){  
        var _v = (e.keyCode) || (e.which) || (e.charCode);  
        if(_v==8){token = false;}else{token = true;}
    };//为Txt1加事件,Jquery实现  A 用户在txt1中按键, 如果是数字的则写入, 其他按键无效; B txt2中显示keyCode, which, charCode的值.
    $("#txt1").keypress(function(e){
        var curKey = (e.keyCode) || (e.which) || (e.charCode);
        $('#txt2').val((e.keyCode) + "," + (e.which) + "," + (e.charCode));
        if (curKey &&(curKey<48 || curKey>57) && token){   //如果按下的是非数字键，则进行以下处理
             e.preventDefault();
        }
    });
    </script>
    </html>4 只允许输入数字的文本框,  javascript版. 事件分别有带对象和不带对象两种
    <html><head>
    <title></title></head>
    <body onkeydown="keyDown(event)">
    <input type = "text" id = "txt1" onkeypress="showKey()"></input>
    <input type = "text" id = "txt4" onkeypress="showKeyEvt(event)" value="0123456789"></input>
    <br/>
    <input type = "text" id = "txt2"></input>
    <input type = "text" id = "txt3"></input>
    </body>
    <script language="javascript">
        var token = true;
        function keyDown(e){
            var _v = (e.keyCode) || (e.which) || (e.charCode);  
            if(_v==8){token = false;}else{token = true;}    
        }
    //为Txt1加事件,javascript实现  A 用户在txt1中按键, 如果是数字的则写入, 其他按键无效; B txt2中显示keyCode, which, charCode的值.
        function showKey(){
            var e = window.event || arguments.callee.caller.arguments[0];
            showKeyEvt(e); 
        }
        
        function showKeyEvt(e){ 
            var curKey = (e.keyCode) || (e.which) || (e.charCode);
            document.getElementById("txt2").value = (e.keyCode) + "," + (e.which) + "," + (e.charCode);
            document.getElementById("txt3").value = curKey;
            if (curKey &&(curKey<48 || curKey>57) && token){   //如果按下的是非数字键，则进行以下处理
                if(e.preventDefault){  
                    e.preventDefault();  
                }else{  
                    e.returnValue = false;  
                    e.cancelBubble=true;  
                }
            }
        }
    </script>
    </html>