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 相关文章推荐
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
JavaScript创建表格的方法
Apr 13 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 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
限制复选框的最大可选数
2006/07/01 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
用原生js做单页应用
2017/01/17 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python中生成Epoch的方法
2017/04/26 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python多任务之协程的使用详解
2019/08/26 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
Shell如何接收变量输入
2012/09/24 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
火车的故事教学反思
2014/02/11 职场文书
公司董事长岗位职责
2014/06/08 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Nginx的基本概念和原理
2022/03/21 Servers