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

最新推荐文章于 2022-09-14 22:15:06 发布

simonhehe

最新推荐文章于 2022-09-14 22:15:06 发布

阅读量991

点赞数

分类专栏： Javascript 文章标签： javascript function token jquery input ie

本文链接：https://blog.youkuaiyun.com/simonhehe/article/details/6660714

版权

Javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍使用JavaScript实现鼠标点击页面时显示点击对象，并检查Shift键是否按下。同时提供了只允许输入数字的文本框示例，包括jQuery和纯JavaScript版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 οnclick="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 οnclick="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.οnkeydοwn=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 οnkeydοwn="keyDown(event)">
<input type = "text" id = "txt1" οnkeypress="showKey()"></input>
<input type = "text" id = "txt4" οnkeypress="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>