点击div、span、p等文本标签时隐藏光标的方法

最新推荐文章于 2023-12-04 18:15:27 发布

lixiaonaaa

最新推荐文章于 2023-12-04 18:15:27 发布

阅读量1.1k

点赞数 1

分类专栏： css 文章标签： css3 css

本文链接：https://blog.csdn.net/lixiaonaaa/article/details/123274664

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

/* 隐藏鼠标点击这些元素时出现的光标 */
div, span, p {
    caret-color: transparent;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lixiaonaaa

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击div、span、p等文本标签时隐藏光标的方法

/* 隐藏鼠标点击这些元素时出现的光标 */div, span, p { caret-color: transparent;}
复制链接

扫一扫

专栏目录

vue项目中在可编辑div光标位置插入内容的实现代码

12-29

vue项目中在可编辑div光标位置插入内容 html： <div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,> {{item.labelName}} </div> <div ...

js实现点击图片将图片地址复制到粘贴板的方法

10-24

当用户点击图片时，事件监听器会将图片的`src`属性赋值给隐藏的`<span>`，然后创建一个`TextRange`对象，将其范围移动到隐藏的`<span>`元素内。最后，调用`execCommand("copy")`执行复制操作，这样图片地址就被复制...

参与评论您还未登录，请先登录后发表或查看评论

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

ansinyu的博客

01-17

6188

干掉光标！有时候在做一些点击的组件时，如button、tag、侧边栏等等，做完了效果都不错，但是矫情的大前端会发现：点击到组件上的文字比如侧边栏时，会出现一个类似input的光标！但我们根本就没有输入需求，这个光标很多余。如图：是可忍孰不可忍！解决他需要一行代码。 .xxx { caret-color: transparent; } ...

span标签点击去掉光标

最新发布

Hero_rong的博客

12-04

190

很简单，一行样式搞定。

css不调用光标,通过div点击而不会丢失光标css

weixin_39565332的博客

08-03

349

有很多“如何点击CSS与CSS”的重复，但我的情况似乎有点不同。通过div点击而不会丢失光标css我正在使用-webkit-appearance和-moz-appearance使div看起来像文本区域，但这在某些浏览器中并不完美......右下角不显示nwse光标就像它在某些浏览器中所做的一样。我想用光标覆盖div：nwse-resize，但我也希望能够点击这个div，以便人造文本区域可以真正展开...

input去掉光标

sky_LQ的博客

11-15

3076

效果： <div class="parking-box"> <input type="text" class="title-val" placeholder="请输入手机号码" /> </div> style样式 .parking-box input { caret-color: transpa

可编辑DIV 光标位置处理

weixin_30815427的博客

08-06

197

//场景：要做一个网页即时通信,发送信息的文本编辑框要求能发图片和表情，那么textarea就不能满足需求了，因为textarea内没有办法加入image// 采用方案是使用可编辑的DIV（也就是一般 DIV的 contenteditable 属性为 true）// 但是发现添加表情或者插入图片之后，光标不会随着移动到末尾图片和表情采用的 append方式添加的htm...

css,div+css.docx

05-07

有时我们会使用`div`和`span`来构建布局，`div`常用于大的布局区域，而`span`则用于更小的、需要独立样式控制的部分。此外，通过设置`margin`和`padding`，结合绝对定位，可以实现元素的居中对齐。总之，Div+CSS是...

js+html+css实现鼠标移动div实例.docx

01-19

5. 使用jQuery向`div`添加HTML文本内容的简便方法。 6. jQuery加载HTML页面到指定`div`的实现。 7. 避免在HTML中滥用`div`，以保持代码的清晰和语义化。总的来说，这个实例提供了对JavaScript事件处理、DOM操作和...

input元素[type="file"]时的样式定制及浏览器兼容性问题探讨

09-28

在某些情况下，尽管设置了`cursor:pointer`，`input[type="file"]`周围的某些区域可能仍然显示为文本光标，而不是手形指针，导致用户体验下降。这个问题可能需要更深入的CSS hack或者JavaScript来修复，例如监听鼠标...

html点击div等元素隐藏光标

weixin_44234050的博客

06-30

1500

html点击div等元素隐藏光标

JSP标签隐藏以及不可修改

热门推荐

念念不忘，必有回响

09-20

1万+

标签隐藏：方法一：设置 style ="display:none" <td><input type = "text" style ="display:none" name = "bookid" value="${param.bookid}"></td> 方法二：设置 style="visibility

点击div文字标签出现光标的问题

weixin_45615375的博客

05-16

2802

去掉光标有时候我们在点击div和span或者p标签时，会出现光标，但是并不是输入框，所以光标是我们所不需要的这个时候我们就不要给他去掉解决方案和原因：打开浏览器时，我们不小心按了F7，只需要按回来就行 ...

css 去除鼠标的光标

小武的博客

04-22

1235

css的属性 caret-color: rgba(0,0,0,0);

span标签去除点击事件

fgndsg的博客

10-11

1112

span标签去除点击事件 //设置点击事件不可用 $("#verificode").css(“pointer-events”, “none”); //点击事件可用 $("#verificode").css(“pointer-events”, “auto”);

css设置input不显示光标

weixin_33682790的博客

11-19

3223

把光标颜色设置为透明色和父类一样就看不出来了，就好像取消了caret-color: transparent; 设置了这个属性后，无论如何点击都好像没有光标似的转载于:https://www.cnblogs.com/renjianjun/p/9984550.html...

css改变光标方法

wuxiaobingandbob的专栏

03-03

1125

Mouse over the words to change the cursor. auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait

css去除鼠标聚焦时的光标

a2628000的博客

10-15

2267

原理是设置光标的颜色为透明：caret-color:rgba(0,0,0,0); 转载于:https://www.cnblogs.com/xiang-hao/p/9791334.html

vue 中div标签根据光标插入元素

07-14

在Vue中，可以使用`contenteditable`属性来实现根据光标位置插入元素的功能。下面是一个基本的实现示例：首先，在Vue组件的模板中，添加一个`div`元素，并设置`contenteditable`属性为true，使其可编辑： ```html <template> <div contenteditable="true" @input="handleInput"></div> </template> ``` 然后，在Vue组件的方法中，定义一个`handleInput`方法来处理输入事件。在该方法中，可以通过`window.getSelection()`获取当前光标的位置，并使用Range对象来插入新的元素： ```javascript <script> export default { methods: { handleInput() { const selection = window.getSelection(); const range = selection.getRangeAt(0); // 创建一个新的span元素 const newElement = document.createElement('span'); newElement.textContent = '新元素'; // 插入新元素到光标位置 range.insertNode(newElement); // 重新设置光标位置 range.setStartAfter(newElement); range.collapse(true); // 清除选区 selection.removeAllRanges(); selection.addRange(range); } } } </script> ``` 在上述示例中，每次在`div`中输入内容时，都会触发`handleInput`方法。该方法获取当前光标位置并创建一个新的`span`元素，然后将其插入到光标位置，并重新设置光标位置以便继续输入。最后，清除选区以避免干扰后续输入。请注意，上述示例仅为演示如何根据光标插入元素，并没有考虑到其他复杂的情况，如光标在不同元素之间移动、选择文本等。实际使用时，可能需要根据具体需求进行适当的扩展和调整。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交