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 相关文章推荐
js精度溢出解决方案
Dec 02 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
js实现简单数字变动效果
Nov 06 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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
2021年最新CPU天梯图
2021/03/04 数码科技
那些年一起学习的PHP(三)
2012/03/22 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
小程序实现tab标签页
2020/11/16 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Python @property及getter setter原理详解
2020/03/31 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
骨干教师培训制度
2014/01/13 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书