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 ...
随机推荐
- WPF通用框架ZFS《项目结构介绍01》_模块介绍
首页介绍: 下图为项目运行首页图片, 大的结构分为三块: 1.Header首部模块(存放通知组件[全局通知.消息管理 ].扩展模块[皮肤.系统设置.关于作者.退出系统]) 2.Left左侧菜单模块(存 ...
- [Python] Slicing Lists
In addition to accessing individual elements from a list we can use Python's slicing notation to acc ...
- poi excel自己主动转换成javabean 支持引用类型属性二级转换
近期项目须要使用excel导入功能.导入学生的时候须要指定所在班级,使用excel一次性导入! 将曾经的代码改改支持属性内引用类的转换. 測试对象为User对象,javabean结构: private ...
- Redisclient连接方式Hiredis简单封装使用,连接池、屏蔽连接细节
工作须要对Hiredis进行了简单封装,实现功能: 1.API进行统一,对外仅仅提供一个接口. 2.屏蔽上层应用对连接的细节处理: 3.底层採用队列的方式保持连接池,保存连接会话. 4.重连时採用时间 ...
- HTML5贪吃蛇源代码
显示效果例如以下:点击这里! 代码下载:点击这里! <script> function show(){ var date = new Date(); //日期对象 var ...
- CF 246 div2 D Prefixes and Suffixes (全部前缀的出现次数)
题目链接:http://codeforces.com/contest/432/problem/D 题意:对一个长度不超过10^5的字符串.按长度输出和后缀全然匹配的的前缀的长度,及该前缀在整个串中出现 ...
- actionMode-theme中修改actionmode中more下拉框的背景颜色
今天在做图库修改是,需要修改图库的actionbar某个按钮弹出来的下拉框的背景颜色,在网上找了个方法尝试下,没有打到自己的要求,不过阴差阳错的却修改了more下拉框的背景,再次记录下,也许以后能用的 ...
- 深入理解Android(1)——理解Android中的JNI(上)
我参加了CSDN博客之星评选,如果在过去的一段时间里阳光小强的博客对你有所帮助,在这里希望能投上您宝贵的一票,每天都可以投一次:http://vote.blog.csdn.net/blogstar20 ...
- Qwt库的一个使用注意事项
作者:朱金灿 来源:http://blog.csdn.net/clever101 一般debug版本的程序链接release版本的库是没有问题的.今天使用debug版本程序链接release版本的qw ...
- 企业实战之部署Solarwinds Network八部众
企业实战之部署Solarwinds Network 网管系统八部众 Orion Network Performance Monitor是全面的带宽性能监控和故障管理软件,能监控并收集来自路由器.交换机 ...