JS学习笔记 - 自定义右键菜单、文本框只能输入数字
<script>
// 事件总共有2个部分,
//1.点击鼠标右键的表现 oncontextmenu 2.点击鼠标左键的表现(即普通点击onclick)
// 点击右键,div位置定位到鼠标所在位置, 且阻止鼠标右键的默认菜单
// 点击左键(即普通的onclick点击),div消失。 document.oncontextmenu=function (ev)
// oncontextmenu 点击右键触发
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1'); oDiv.style.display='block';
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px'; return false;
}; document.onclick=function ()
// onclick 正常点击时触发 (鼠标左键,任意点击页面)
{
var oDiv=document.getElementById('div1'); oDiv.style.display='none';
};
</script>
自定义右键菜单,错误记录
<style>
*{margin:0;padding:0; list-style: none;}
#div1{
background-color: #ccc;
border: 1px solid #000;
width: 80px;
display: none; position:absolute;
/* CSS没写绝对定位,就不能移动!!!不要再忘记了!!!*/
}
</style> <script> function getPos(ev) //这个函数的先后顺序有区别吗?
{
// 这里没有涉及到移出当前屏幕的滚动条情况。
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; //var oEvent = ev||event;
// 这个oEvent 应该是其他事件调用这个函数时使用,不是封装函数本身里的。 // return{x:oEvent.clientX + scrollLeft, y:oEvent.clientY + scrollTop};
return{x:ev.clientX + scrollLeft, y:ev.clientY + scrollTop}
} document.oncontextmenu = function (ev) // 这里没写ev!!!
{
//本条补写:
var oEvent = ev||event; var oDiv = document.getElementById('div1'); var pos = getPos(oEvent) // var pos = getPos(ev); // 如果要调用getPos函数,这里括号里怎么表示? oDiv.style.display = 'block';
oDiv.style.left = pos.x + 'px';
oDiv.style.top = pos.y + 'px'; return false;
}; document.onclick = function ()
{
var oDiv=document.getElementById('div1'); oDiv.style.display='none';
}; </script>
    window.onload = function(){
        var oTxt = document.getElementById('txt1');
        oTxt.onkeydown = function(ev){
        //document.onkeydown = function(ev)  //应该是给文本框加事件,不是document
        // onkeydown这个事件不只是document可以用,在哪里按键盘了就在哪用。     
            var oEvent = ev||event;
         if(oEvent.keyCode!=8 && oEvent.keyCode<49 || oEvent.keyCode>57)
            {
                return false;
            }
        };
    }
JS学习笔记 - 自定义右键菜单、文本框只能输入数字的更多相关文章
- js限制文本框只能输入数字方法小结(转)
		
这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下 有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...
 - C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位
		
使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...
 - js限制文本框只能输入数字
		
JS判断只能是数字和小数点1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'') ...
 - js设置文本框只能输入数字
		
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...
 - js正则表达式限制文本框只能输入数字,小数点,英文字母
		
1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...
 - js限制文本框只能输入数字方法小结
		
有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 代码如下: <input onkeyup="i ...
 - js限制文本框只能输入数字方法
		
输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,' ...
 - js 文本框只能输入数字和点
		
http://www.jb51.net/article/51102.htm 手机端 只能输入数字,能输小数点.且只能2位小数 oninput="this.value=this.value.r ...
 - replace限制文本框只能输入数字,数字和字母等的正则表达式
		
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
 
随机推荐
- php将数组或字符串写入文件
			
//将数组保存在文件里 function export_to_file($file, $variable) { $fopen = fopen($file, 'wb'); if (!$fopen) { ...
 - geotif格式的波段描述信息探究
			
作者:朱金灿 来源:http://blog.csdn.net/clever101 有时打开一些geotif文件,可以看到它的波段描述,但是它究竟存储在文件的什么位置呢?今天研究了一下,大致搞清了这个问 ...
 - System.GC.Collect();//垃圾回收,回收没有正常关闭的http连接
			
System.GC.Collect();//垃圾回收,回收没有正常关闭的http连接
 - Easy mock - 安装配置和基本使用
			
Easy-mock easy-mock是一款比较好用的接口模拟工具, 使用之前我们需要安装和配置 需要下载的内容有以下 Node Redis MongoDB Node和Redis一路点下一步就行, M ...
 - chattr---文件隐藏属性
 - python2 python3 m2crypto 安装(rsa 私钥文件加密)
			
转自作者:大道至简_Andy 原文链接:https://www.jianshu.com/p/b308357ef649 第一种方式:使用apt-get(以Python2版本进行测试的) sudo apt ...
 - hdu2768Cat vs. Dog (反建法,最大独立集)
			
Cat vs. Dog Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
 - linux 配置IP地址
			
linux 配置IP网址能够使用neat,netconfig,ifconfig等进行配置,当中前两个实用户界面,第三个命令仅仅是暂时设置IP,机器重新启动后配置将丢失. 有时候图形用户界面的程序难以获 ...
 - Qt虽然自己的源代码里不使用Exception,但也提供了一个QException及其子类QUnhandledException
			
http://doc.qt.io/qt-5/exceptionsafety.htmlhttp://doc.qt.io/qt-5/qexception.htmlhttp://doc.qt.io/qt-5 ...
 - 用 cctld工具创建带有国家代码的IP地址表
			
用 cctld工具创建带有国家代码的IP地址表 cctld tools is creating IP addresses table with Country Code 项目地址 https://gi ...