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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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
实用函数7
2007/11/08 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
第四章 php数学运算
2011/12/30 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
Python中单、双下划线的区别总结
2017/12/01 Python
学习python分支结构
2019/05/17 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
西门豹教学反思
2014/02/04 职场文书
个人担保书格式范文
2014/05/12 职场文书
临时租车协议范本
2014/09/23 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
人事专员岗位职责
2015/02/03 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书