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

来源：互联网发布：条码软件编辑：程序博客网时间：2024/06/08 11:18

JavaScript语法学习笔记之鼠标及按键操作, 兼容IE及FF

看到的朋友有任何意见和建议请多提

----------------------------------------------------------------------------------------------------------------------------

1 鼠标点击页面后显示点击对象,检查shift按钮是否按下

<html><head><title></title><script language="javascript">    <!--        function checkShift(){            var e = window.event || arguments.callee.caller.arguments[0];            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();"><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 功能同上, 区别就是后者传入了对象.

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

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>

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

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