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 实现完美include载入实现代码
Aug 05 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
javascript中正则表达式语法详解
Aug 07 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
开启PHP的伪静态模式
2015/12/31 PHP
php简单获取复选框值的方法
2016/05/11 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
UDP协议功能
2013/01/06 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
教你打造完美的创业计划书
2014/01/06 职场文书
单位委托书格式范本
2014/09/29 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL