Javascript 鼠标不在输入框内,禁用掉空格键的默认事件

最近开发一个大屏项目,需要按住左键对画布进行拖拽,但是由于在画布需要框选元素已经占用了左键的功能,所以产品提出在按住空格键 + 左键的情况下对画布进行拖拽的需求。我们知道空格键是有它的默认事件的。如果鼠标光标在输入框(这里指input、textarea等)内,敲击空格键的作用是在输入框内增加一个空格;如果鼠标光标不在输入框内,那么敲击空格键则会滚动滚动条(如果有滚动条的话)。那么我的需求就是:如果鼠标在输入框内,敲击空格键就有默认事件;如果鼠标光标不在输入框内,则阻止掉空格键的默认事件;以下是详细代码:

function keydown(e) {
  if (e.keyCode === 32) {
  // 如果鼠标不在输入框内,禁用掉空格键的默认事件(控制滚动条)
    if (e.target.nodeName !== "TEXTAREA" && e.target.nodeName !== "INPUT") {
      e.preventDefault();
    }
  }
}

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现在Ant Design的Input输入框内右键鼠标弹出菜单栏,而在输入框外右键不显示菜单,您可以按照以下步骤进行操作: 1. 首先,您需要使用Ant Design的`ContextMenu`组件来创建菜单栏。您可以通过安装`@ant-design/context-menu`依赖来获取该组件。 2. 在您的代码中导入所需的组件: ```javascript import { ContextMenu, MenuItem } from '@ant-design/context-menu'; ``` 3. 在Input组件内部创建ContextMenu组件,并设置触发右键事件的条件: ```javascript <ContextMenu className="input-context-menu" overlay={menu} hidden={!showContextMenu}> <Input onContextMenu={handleContextMenu} /> </ContextMenu> ``` 这里的`menu`是您自定义的菜单内容,`showContextMenu`是一个状态变量,用于控制菜单的显示与隐藏。 4. 实现右键事件处理函数`handleContextMenu`,根据鼠标点击位置判断是否在输入框内部,并更新`showContextMenu`状态变量: ```javascript const handleContextMenu = (e) => { e.preventDefault(); const input = e.target; const { clientX, clientY } = e; const rect = input.getBoundingClientRect(); if ( clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom ) { setShowContextMenu(true); } else { setShowContextMenu(false); } }; ``` 5. 最后,在组件的样式表中定义`.input-context-menu`类,设置菜单栏的样式: ```css .input-context-menu { position: absolute; left: 0; top: 0; } ``` 这样,您就可以实现在Ant Design的Input输入框内右键鼠标弹出菜单栏,而在输入框外右键不显示菜单的效果了。希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值