Event altKey,ctrlKey,shiftKey属性解析


Posted in Javascript onDecember 18, 2013

event.altKey
功能:检测事件发生时Alt键是否被按住了。

语法:event.altKey

取值:true | false

说明:

altKey属性为true表示事件发生时Alt键被按下并保持,为false则Alt键没有按下。
altKey属性可结合鼠标或键盘使用,多用于制作一些快捷操作方式。

event.ctrlKey
功能:检测事件发生时Ctrl键是否被按住了。

语法:event.ctrlKey

取值:true | false

说明:

ctrlKey属性为true表示事件发生时Ctrl键被按下并保持,为false则Ctrl键没有按下。
ctrlKey属性可结合鼠标或键盘使用,多用于制作一些快捷操作方式。

event.shiftKey
功能:检测事件发生时Shift键是否被按住了。

语法:event.shiftKey

取值:true | false

说明:

shiftKey属性为true表示事件发生时Shift键被按下并保持,为false则Shift键没有按下。
shiftKey属性可结合鼠标或键盘使用,多用于制作一些快捷操作方式。

 实例1
组合操作示例。

<input id="txt1" type="text" value="Hello World!" onclick="checkAlt(event)" />
<script type="text/javascript">
function checkAlt(oEvent)
{
  if( oEvent.altKey )
    document.getElementById("txt1").select();
}
</script>

这段代码的效果为: 

如果按住Alt键再单击上面的文本框,可以选中文本框中的文本。

 实例2
组合操作示例。

<input id="txt2" type="text" value="Hello World!" onclick="clearText(event)" />
<script type="text/javascript">
function clearText(oEvent)
{
  if( oEvent.ctrlKey && oEvent.keyCode==46 )
    document.getElementById("txt2").value = "";
}
</script>

这段代码的效果为: 

使用"Ctrl+Del"组合键可清除上面的文本框的内容。(必须先使文本框获得焦点。本例只适用于IE浏览器。)

 实例3
组合操作示例。

<div id="box" style="width:50px; height:25px;border:1px solid black; background-color:red" onclick="setColor(event)"></div>
<script type="text/javascript">
var b = true;
function setColor(oEvent)
{
  if( oEvent.shiftKey && b )
    document.getElementById("box").style.backgroundColor = "blue";
  if( oEvent.shiftKey && !b )
    document.getElementById("box").style.backgroundColor = "red";
  b = !b;
}
</script>

这段代码的效果为:

按住"Shift"键并用鼠标点击上面的色块,可改变色块颜色

Javascript 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
jQuery Ajax之load()方法
Oct 12 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
angularjs实现天气预报功能
Jun 16 Javascript
实例详解Node.js 函数
Jun 10 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 #Javascript
Javascript浅谈之this
Dec 17 #Javascript
将list转换为json失败的原因
Dec 17 #Javascript
js实现可拖动DIV的方法
Dec 17 #Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 #Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 #Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 #Javascript
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
javascript比较文档位置
2008/04/08 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python tkinter窗口最大化的实现
2019/07/15 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Series和DataFrame使用简单入门
2019/11/13 Python
文秘自荐信
2013/10/20 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
钱学森电影观后感
2015/06/04 职场文书
小学生教师节广播稿
2015/08/19 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
python简单验证码识别的实现过程
2021/06/20 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
nginx结合openssl实现https的方法
2021/07/25 Servers
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
详细介绍python操作RabbitMq
2022/04/12 Python