Event altKey,ctrlKey,shiftKey属性解析
作者:互联网
2025-08-11
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" 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"键并用鼠标点击上面的色块,可改变色块颜色
相关标签:
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
Vue3 KeepAlive 深度揭秘:组件缓存的魔法是如何实现的?
你的 Vue 3 useAttrs(),VuReact 会编译成什么样的 React?
虚拟 DOM 的 Diff 算法:Vue/React 如何实现高效更新
前端必看!console 调试不只有 log,这 8 个技巧省一半调试时间
在线CAD开发包图纸转换功能使用指南
Vue组件通信全场景详解(Vue2+Vue3适配)| 实战必备,新手也能看懂
vite+vue2 动态路由加载方法实现
「性能优化」虚拟列表极致优化实战:从原理到源码,打造丝滑滚动体验
你的 Vue 3 生命周期,VuReact 会编译成什么样的 React?
你的 Vue 3 defineProps(),VuReact 会编译成什么样的 React?
AI精选
MCP协议设计与实现-第11章 Python Client 实现剖析
MCP协议设计与实现-第20章 从零构建一个生产级 MCP Server
MCP协议设计与实现-第16章 服务发现与客户端注册
MCP协议设计与实现-第18章 Elicitation、Roots 与配置管理
MCP协议设计与实现-第10章 Python Server 实现剖析
MCP协议设计与实现-第17章 sampling
MCP协议设计与实现-第09章 TypeScript Client 实现剖析
MCP协议设计与实现-第19章 Claude Code 的 MCP 客户端:12 万行的实战
