input输入框相关的控制如禁止鼠标移动右键等

禁止复制:οncοpy=”return false”


禁止粘贴:οnpaste=”return false”


禁止剪切:oncut=”return false”


禁止右键弹出:οncοntextmenu=”return false”


关闭自动完成功能(缓存):autocomplete=”off”


自动获得焦点:autofocus=”autofocus”


禁用自动更正:autocorrect=”off”


来关闭键盘默认首字母大写(移动端):autocapitalize=”off”


不对元素的文本进行拼写检查:spellcheck=”false”

onpaste是粘贴事件,ondragenter是拖拽事件

<input type="text" name="name" οnpaste="return false" οndragenter="return false" > 

注意:有时候顺序还会影响是否有效。。。。。亲测

 οnpaste="return false" οncοntextmenu="return false" οncοpy="return false" oncut="return false" 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在 Ant Design 的 Input 输入框上点击,在鼠标位置弹出 Dropdown 菜单,您可以使用 `onContextMenu` 事件结合 `Dropdown` 组件来实现。以下是一个示例代码: ```jsx import React, { useState } from 'react'; import { Input, Dropdown, Menu } from 'antd'; const App = () => { const [menuVisible, setMenuVisible] = useState(false); const [inputValue, setInputValue] = useState(''); const handleContextMenu = (e) => { e.preventDefault(); const mouseX = e.clientX; const mouseY = e.clientY; setMenuVisible(true); setMenuPosition({ x: mouseX, y: mouseY }); }; const handleMenuClick = (e) => { console.log('点击了菜单项', e.key); setMenuVisible(false); }; const menuPositionStyle = { position: 'fixed', left: menuPosition.x, top: menuPosition.y, }; return ( <div onContextMenu={handleContextMenu}> <Input value={inputValue} onChange={(e) => setInputValue(e.target.value)} /> {menuVisible && ( <div style={menuPositionStyle}> <Dropdown overlay={ <Menu onClick={handleMenuClick}> <Menu.Item key="item1">菜单项1</Menu.Item> <Menu.Item key="item2">菜单项2</Menu.Item> <Menu.Item key="item3">菜单项3</Menu.Item> </Menu> } onVisibleChange={(visible) => setMenuVisible(visible)} visible={menuVisible} > <div style={{ display: 'none' }} /> </Dropdown> </div> )} </div> ); }; export default App; ``` 在上面的示例中,我们首先定义了一个 `App` 组件。在组件中,我们使用 `useState` 来维护菜单的显示状态 (`menuVisible`)、输入框的值 (`inputValue`) 和菜单的位置 (`menuPosition`)。 在 `handleContextMenu` 函数中,我们通过 `e.preventDefault()` 来阻止默认的菜单显示,并获取鼠标点击的位置 (`e.clientX` 和 `e.clientY`)。然后,我们将 `menuVisible` 设置为 `true`,以显示下拉菜单,并将菜单的位置保存到 `menuPosition` 中。 接着,我们根据 `menuPosition` 动态设置菜单的位置,通过 `style` 属性给菜单元素添加 `position: fixed;`、`left: menuPosition.x;` 和 `top: menuPosition.y;`。 最后,在 `Dropdown` 组件外部包裹一个 `<div>` 元素,并设置其样式为动态计算的菜单位置样式。这样就可以在鼠标点击的位置弹出 Dropdown 菜单。 这样,当您在输入框上点击时,就会在鼠标点击的位置弹出 Dropdown 菜单,并且可以选择菜单项进行操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值