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 强制类型转换函数
May 17 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
详解javascript函数写法大全
Mar 25 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
通过JS判断网页是否为手机打开
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 Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
PyQt5实现简易计算器
2020/05/30 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
电子商务专业学生的自我鉴定
2013/11/28 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
标准版离职证明书
2014/09/12 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
大学生见习报告总结
2014/11/04 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python