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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
js function定义函数使用心得
Apr 15 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
浅谈js中对象的使用
Aug 11 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
xml+php动态载入与分页
2006/10/09 PHP
PHP数据库开发知多少
2006/10/09 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
二招解决php乱码问题
2012/03/25 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
用Python写一个无界面的2048小游戏
2016/05/24 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
深入了解Python enumerate和zip
2020/07/16 Python
8种常用的Python工具
2020/08/05 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
留守儿童工作方案
2014/06/02 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
2016新年致辞
2015/08/01 职场文书
学生安全责任协议书
2016/03/22 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
Win11查看设备管理器
2022/04/19 数码科技