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 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
node.js超时timeout详解
Nov 26 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
javascript实现简易计算器的代码
May 31 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
js实现简单图片拖拽效果
Feb 22 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遍历目录并返回统计目录大小
2014/06/09 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
简单实现python爬虫功能
2015/12/31 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
运行Python编写的程序方法实例
2020/10/21 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
简单的辞职信范文
2014/01/18 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
管理工程专业求职信
2014/08/10 职场文书
食品安全汇报材料
2014/08/18 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
微信小程序实现录音Record功能
2021/05/09 Javascript
java实现web实时消息推送的七种方案
2022/07/23 Java/Android