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 ...
随机推荐
- STM32CUBEF4 实现USB 虚拟串口
一.stm32cubemx 生成工程后USB转串口出现黄色感叹号的问题 如下图所示,在stm32cubemx工程中选择usb转串口功能Communication Device Class (Virtu ...
- 洛谷 P2355 团体操队形
P2355 团体操队形 题目背景 X中学要团体操比赛了哦.队形该怎样排呢? 题目描述 有n(n<=100000)个团体操队员编号分别为1~n,参加运动会开幕式的团体操表演.其基本队形(分连续队形 ...
- 记VS2008初始化Microsoft Visual Sourcesafe源码管理提供程序时失败
之前vs2008开发一直都好好,不知道为什么如今的vs2008打开和关闭都老是弹出这这个初始化Microsoft Visual Sourcesafe源码管理提供程序时失败的错误 解决方法非常easy: ...
- 使用cocos2dx 3.2和cocosstudio屏幕适配总结----相对布局
屏幕适配的文章太多了,基本上都是理论性的东西.大家明确了机制就知道了.没有完美的适配方案,除非你们的美工愿意折腾. 常规策略: 今天研究了一下屏幕适配导致的缩放和展示不全的问题(黑边的方案直接淘汰). ...
- VS添加程序集
项目->添加->引用->程序集 可在项目的引用目录中,查看引用的程序集
- php实现简单算法3
php实现简单算法3 这篇文章主要介绍了PHP经典算法集锦,整理了各种常见的算法,包括排序.查找.遍历.运算等各种常见算法原理与实现技巧,需要的朋友可以参考下 1.首先来画个菱形玩玩,很多人学C时在书 ...
- jq---方法总结
1. 什么是jQuery 在使用jQuery之前,我们必须先了解什么是jQuery,它能够干什么(不然我们为啥要用它). jQuery是一个非常流行的快速.小巧.功能强大的开源JavaScript库. ...
- 69.类型后缀,重载操作符""
#include <iostream> using namespace std; class myclass { public: int num; int num2; public: my ...
- Mvc异步
<h3>MVC 自带的yibu请求</h3> <%-- 1.要执行的方法,2.控制器,3.Ajax操作--%> <%using (Ajax.BeginForm ...
- Oracle primary key&foreign key
--主键 alter table tablename1 add constraint pk_tablename1 primary key(column1);--增加数据表1的主键column1,如果是 ...