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的几种方法小结
Apr 25 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
浅析javascript 定时器
Dec 23 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
cypress测试本地web应用
Jun 01 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
mysql limit查询优化分析
2008/11/12 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
php生成短网址示例
2014/05/05 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
js 文件引入实现代码
2010/04/23 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
简单介绍Python中的JSON使用
2015/04/28 Python
Python获取任意xml节点值的方法
2015/05/05 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python常见字典内建函数用法示例
2018/05/14 Python
在python中安装basemap的教程
2018/09/20 Python
Python实现某论坛自动签到功能
2019/08/20 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
关于读书的演讲稿
2014/05/07 职场文书
会计学专业自荐信
2014/06/25 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python