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 15 Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
关于文本限制字数的js代码
Apr 02 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
js获取form表单中name属性的值
Feb 27 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(1)
2006/10/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP面向对象精要总结
2014/11/07 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python抓取网页中链接的静态图片
2018/01/29 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python 调用有道api接口的方法
2019/01/03 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
用python制作个音乐下载器
2021/01/30 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
Python实现简单的2048小游戏
2021/03/01 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
车队司机个人自我鉴定
2014/04/17 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL