点击div或者span等标签的文字,隐藏光标

3 篇文章 0 订阅
干掉光标!

有时候在做一些点击的组件时,如button、tag、侧边栏等等,做完了效果都不错,但是某些情况下会发现:点击到组件上的文字比如侧边栏时,会出现一个类似input的光标!
但我们根本就没有输入需求,这个光标很多余。如图:
点击文字会出现一个光标在闪烁
出现这个问题有两个解决方法:
1、可能是打开浏览器时不小心按了F7,只需要按回来就行。
2、需要一行代码:

.xxx {
  caret-color: transparent;
}
  • 19
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
要在JavaScript中实现在可编辑的div中插入表情或其他特殊字符,需要先获取光标所在的位置,然后在该位置插入相应的HTML元素或文本节点。 获取光标位置可以使用Selection对象和Range对象。下面是一个获取光标位置的示例代码: ```javascript // 获取可编辑div的DOM节点 var editableDiv = document.getElementById('editableDiv'); // 获取Selection对象 var selection = window.getSelection(); // 获取Range对象 var range = selection.getRangeAt(0); // 获取光标位置(在Range对象的起点位置插入新元素) range.insertNode(document.createElement('span')); ``` 在获取了光标位置之后,可以使用DOM操作来插入表情或其他特殊字符。下面是一个插入表情的示例代码: ```javascript // 获取可编辑div的DOM节点 var editableDiv = document.getElementById('editableDiv'); // 获取Selection对象 var selection = window.getSelection(); // 获取Range对象 var range = selection.getRangeAt(0); // 创建img元素 var img = document.createElement('img'); img.src = 'path/to/emoji.png'; // 在Range对象的位置插入img元素 range.insertNode(img); ``` 在插入表情或其他特殊字符时,还可以使用document.execCommand()函数来执行一些常用的编辑操作,例如粗体、斜体、下划线、字体颜色等。下面是一个使用document.execCommand()函数插入文本的示例代码: ```javascript // 获取可编辑div的DOM节点 var editableDiv = document.getElementById('editableDiv'); // 获取Selection对象 var selection = window.getSelection(); // 获取Range对象 var range = selection.getRangeAt(0); // 插入文本 document.execCommand('insertHTML', false, 'Hello, world!'); ``` 以上是基本的实现方法,您可以根据自己的需求进行适当的修改和扩展。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值