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 相关文章推荐
在新窗口打开超链接的方法小结
Apr 14 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
Javascript中typeof 用法小结
May 12 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
原生js实现贪吃蛇游戏
Oct 26 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/10/09 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
微信小程序实现签到功能
2018/10/31 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python3简单实现微信爬虫
2015/04/09 Python
详细介绍Python中的偏函数
2015/04/27 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
党员批评与自我批评
2014/02/12 职场文书
青安岗事迹材料
2014/05/14 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
转让协议书
2015/01/27 职场文书
法人代表资格证明书
2015/06/18 职场文书
python数字类型和占位符详情
2022/03/13 Python
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis