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也能使用EXTJS视频演示
Dec 29 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
iview实现图片上传功能
Jun 29 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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与ASP
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
php实现图片压缩处理
2020/09/09 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Python函数和模块的使用总结
2019/05/20 Python
python各层级目录下import方法代码实例
2020/01/20 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
干部下基层实施方案
2014/03/14 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js