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 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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
php.ini 中文版
2006/10/28 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
Python每天必学之bytes字节
2016/01/28 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python贪吃蛇游戏代码
2020/04/18 Python
python 图片去噪的方法示例
2019/07/09 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
python中的itertools的使用详解
2020/01/13 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
敏捷开发的主要原则都有哪些
2015/04/26 面试题
高中生校园生活自我评价
2013/09/19 职场文书
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
话题作文之诚信
2019/11/28 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js