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 读取和设置文档元素的样式属性
Apr 14 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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中的类-什么叫类
2006/11/20 PHP
php实现jQuery扩展函数
2009/10/30 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python3读取zip文件信息的方法
2015/05/22 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python 数据类型强制转换的总结
2021/01/25 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
不假外出检讨书
2014/01/27 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
文员岗位职责
2015/02/04 职场文书
培训督导岗位职责
2015/04/10 职场文书
小学英语课教学反思
2016/02/15 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript
德生BCL3000抢先使用感受和评价
2022/04/07 无线电