首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:第六章 - 按键修饰符的使用

在传统的前端开发中,当我们碰到这种类似的需求时,我们往往需要知道 js 中需要监听的按键所对应的 keyCode,然后通过判断 keyCode 得知用户是按下了那个按键,继而执行后续的操作。...1 .enter 2 .tab 3 .delete (捕获“删除”和“退格”键) 4 .esc 5 .space 6 .up 7 .down 8 .left 9 .right   在下面的代码中,我们同样监听了...在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。   可能你会觉得,这和按键修饰符也没什么差别啊,都是按下按键然后执行操作啊,看了看官方文档的解释,em,好像更晕了。...可能 gif 图表达的不是很清楚,当我点击 ctrl 按键时,没有执行我们的 log 方法,当我点击 c 按键时也并没有执行我们的自定义方法,可是当我按下 ctrl 按键时,又点击 c 按键时(这里的操作等同于你在编辑文档时使用...你可以亲身尝试下,你会发现,当我们使用 ctrl+c、ctrl+s 时会触发我们的自定义 log 事件,可是当你使用 ctrl+alt+c 时就不会触发我们的自定义 log 事件。

90520
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue这些修饰符帮我节省20%的开发时间

    比如onkeyup,onkeydown啊 .keyCode 如果不用keyCode修饰符,那我们每次按下键盘都会触发shout,当我们想指定按下某一个键才触发这个shout的时候,这个修饰符就有用了,具体键码查看键码对应表...我们需要将系统修饰键和其他键码链接起来使用,比如 这样当我们同时按下ctrl+c时,就会触发keyup事件。....exact (2.5新增) 我们上面说了这个系统修饰键,当我们像这样绑定了click键按下的事件,惊奇的是,我们同时按下几个系统修饰键,比如ctrl shift点击,也能触发,可能有些场景我们只需要或者只能按一个系统修饰键来触发...(像制作一些快捷键的时候),而当我们按下ctrl和其他键的时候则无法触发。...注意:这个只是限制系统修饰键的,像下面这样书写以后你还是可以按下ctrl + c,ctrl+v或者ctrl+普通键 来触发,但是不能按下ctrl + shift +普通键来触发。

    1.1K00

    Vue这些修饰符帮我节省20%的开发时间

    比如onkeyup,onkeydown啊 .keyCode 如果不用keyCode修饰符,那我们每次按下键盘都会触发shout,当我们想指定按下某一个键才触发这个shout的时候,这个修饰符就有用了,具体键码查看键码对应表...我们需要将系统修饰键和其他键码链接起来使用,比如 这样当我们同时按下ctrl+c时,就会触发keyup事件。....exact (2.5新增) 我们上面说了这个系统修饰键,当我们像这样绑定了click键按下的事件,惊奇的是,我们同时按下几个系统修饰键,比如ctrl shift点击,也能触发,可能有些场景我们只需要或者只能按一个系统修饰键来触发...(像制作一些快捷键的时候),而当我们按下ctrl和其他键的时候则无法触发。...注意:这个只是限制系统修饰键的,像下面这样书写以后你还是可以按下ctrl + c,ctrl+v或者ctrl+普通键 来触发,但是不能按下ctrl + shift +普通键来触发。

    97210

    【建议收藏】面试官贼喜欢问的 32+ vue 修饰符,你掌握几种啦?

    alt按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 19 .shift 仅在按下shift按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 20 .meta 仅在按下meta按键时才触发鼠标或键盘事件的监听器...还是用上面的例子,看一下下面的gif, 此时我同时按下了alt和shift,对应的两个事件都可以触发 system2.gif 只想某个系统修饰键按下时才触发点击 没有任何系统修饰符被按下的时候才触发点击...如下代码,我们分别给enter、tab、delete等按键指定了keydown事件,当在指定的输入框中按下指定的键盘,会打印出enter、tab、delete等,其他按键在输入框中无法触发该console...按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 23 .tab 在按下tab按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 24 .delete 在按下delete按键时才触发鼠标或键盘事件的监听器...在按下up按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 28 .down 在按下down按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 29 .left 在按下left按键时才触发鼠标或键盘事件的监听器

    2.7K10

    HTML DOM 学习

    removeChild() 删除节点,参数是需要删除的节点node;该方法的所属节点对象是node的父节点 element.removeChild(node); 替换节点 replaceChild()...键盘、鼠标、blur方法 onfocus 获得焦点时 键盘、鼠标、focus方法 onchange 修改内容时 键盘、鼠标、赋值语句 onclick 鼠标单击时 键盘、鼠标、click方法 ondblclick...鼠标双击时 鼠标 onkeydown 键盘按下 键盘 onkeypress 键盘按键(按/松) 键盘 onkeyup 键盘抬起 键盘 onmousedown 鼠标按下时 鼠标 onmousemove...鼠标移动时 鼠标 onmouseup 鼠标抬起时 鼠标 onmouseout 鼠标移出时 鼠标 onmouseover 鼠标移入时 鼠标 onload 载入时 系统 onsubmit 表单提交时 键盘、...、ctrlKey、shiftKey 是否按下Alt、Ctrl、Shift键 键盘鼠标 button 鼠标按钮是否按下 鼠标 keyCode 键盘按键时unicode值 键盘 clientX、clientY

    97220

    vue键盘事件

    当键盘按键被释放时,handleKeyUp方法将被调用。2. 使用键盘修饰符Vue提供了一些内置的键盘修饰符,用于更方便地处理常见的键盘事件。...常用的键盘修饰符包括.enter(回车键)、.tab(Tab键)、.delete(删除键)等。...当回车键被释放时,handleEnterKey方法将被调用。3. 自定义键盘事件除了内置的键盘修饰符,Vue还支持自定义键盘事件的处理。...使用事件对象在键盘事件处理函数中,我们可以通过事件对象(event)来获取更多的信息,例如键码(keyCode/key)、按键是否被按下(event.which/event.keyCode)、修饰键(event.shiftKey...pressed'); } }}在上述示例中,当用户在输入框中按下回车键时,handleEnterKey方法将被调用,并在控制台中输出相应的信息。

    1.5K20
    领券