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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
JQuery 常用操作代码
Mar 14 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
JS二分查找算法详解
Nov 01 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Python3基础之基本数据类型概述
2014/08/13 Python
git进行版本控制心得详谈
2017/12/10 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
django使用admin站点上传图片的实例
2019/07/28 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
python中的错误如何查看
2020/07/08 Python
python获取linux系统信息的三种方法
2020/10/14 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物