让网页标签元素的文字不被选中

最新推荐文章于 2023-02-09 11:53:02 发布
最新推荐文章于 2023-02-09 11:53:02 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/81903283
版权

今天用vue发觉文字被选中时会有一些坑，可以用这个c3属性

user-select: none;

这样就可以设置文字不被选中了。

这个属性默认是text,也就是可以选中。但是ie支持不是特别好

如果要兼容ie低版本可以用onselectstart来设置

<div onselectstart="javascript:return false;">我是内容，不可以选我哦</div>

其他兼容性问题还未发觉，路过的大佬也可以说一下。
 

woshidamimi0
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页文字无法选择【解决办法】
愤怒小鸟的博客
07-27 8176
方法一：禁用脚本     1.360浏览器：在浏览器选项中的高级设置JavaScript模块中选择禁用脚本，然后刷新浏览器即可。      2.IE浏览器是在Internet选项-安全-自定义级别-java小程序脚本，选择禁用即可，或者Internet选项-高级-禁用脚本调试即可。 注意：复制完成所需文字后要记得将浏览器恢复成不禁用加粗样式脚本。 方法二：保存网页     1.在浏览
鼠标点击不选中文字
wd
11-23 3109
前言：经常遇见很讨厌的事情，就是在鼠标双击或者连续单击的时候会选中问题，这次在做图片滚动的时候，左边采用了<，没有采用图片，在用户连续点击的时候就会选中这个箭头，用户体验非常不好。但是又不想多添加一个照片，因此就出现了这篇博客通过onselectstart事件<span onselectstart="return false" ><</span>或者div.onselectstart = fu
解决网页文字无法选中或复制
热门推荐
weixin_42312511的博客
09-08 3万+
我们在查看一些网页时会遇到不能复制的问题，或者鼠标无法选中文字，导致不能复制。 这时候我们按下键盘的F12，点击console控制台，输入以下代码后回车即可 var eles = document.getElementsByTagName('*'); for (var i = 0; i < eles.length; i++) { eles[i].style.userSele...
页面文字无法选中？
weixin_33816821的博客
05-06 673
转载于:https://www.cnblogs.com/LLLLily/p/10821349.html
解决网页无法选中文字，无法复制的问题
mabin2005的专栏
09-01 2174
通过以上步骤之后，打开本地网页后即可复制文字了。1.将网页保存到本地，保存为一个单网页；
网页无法选取文字
qq_43530326的博客
09-04 1876
网页无法选取文字
js鼠标移动时禁止选中文字
10-20
在JavaScript编程中，有时我们需要禁止用户在网页上通过鼠标选择文字，这可能是因为要保护页面内容不被复制，或是为了优化交互体验。本篇文章将详细讲解如何使用JS和CSS来实现这一功能。 首先，禁止选中文字主要是...
文字不能被选中，图片不能被下载
12-16
### 文字不能被选中，图片不能被下载：提高自身安全性 在当今互联网时代，网络安全和个人信息安全变得尤为重要。为了防止信息被盗用或者滥用，很多网站和应用会采取一系列措施来保护用户的数据安全。其中一种常见的...
CSS改变网页中鼠标选中文字背景颜色例子
09-25
标签“CSS 鼠标 背景”清晰地表明了本文的焦点在于使用CSS来改变被鼠标选中的文字的背景颜色。这是通过CSS伪元素“::selection”来实现的。大部分现代浏览器（如Webkit引擎的浏览器，如Chrome和Safari；以及IE9及...
vue.js 解决v-model让select默认选中不生效的问题
11-20
在描述中提到，开发者遇到了一个奇怪的现象：`select`下拉框的`v-model`不能正常工作，即不能根据预设的值自动选中相应的选项，但其他`input`框的数据却能正常显示。开发者尝试了更换Vue.js版本、检查变量名、验证...
vue实现页面内容禁止选中功能,仅输入框和文本域可选
12-13
上网上翻了翻，共找到两种方式 CSS样式控制，只需将下面代码复制到 vue应用下，index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{ -webkit-user-select:au
解决网页中文字无法选中的问题
m0_56077202的博客
01-25 5863
解决网页中文字无法选中的问题
实现页面文本内容不可选中/不可复制
lio-zero 的博客
04-18 598
CSS 使用 user-select: none 不可选中，也就不可以复制。 body { user-select: none; } 使用 JS 监听 selectstart 事件，禁止选中。 监听 copy 事件，不可复制。 当用户选中一片区域时(包括点击)，将触发 selectstart 事件，Selection API 将会选中一片区域。禁止选中区域(使用 preventDefaul...
文本不可选中
qq_42610806的博客
08-13 685
在CSS样式里面设置：     -moz-user-select: none;     -webkit-user-select: none;     -ms-user-select: none;     user-select: none;  
如何解决html页面文字无法被选中，进而复制粘贴复用
cwzl_5203344的博客
02-09 4010
在使用vue-admin系统的时候，有时候比较懒想复制页面的文字测试一下某某功能，突然发现鼠标无法选中文字，进行复制。那么问题来了，为何无法选中？
彻底解决网页文字无法选中以及复制的问题!!!（搜集整理）
eling865的专栏
12-07 5772
一、禁用脚本法: 打开浏览器,然后在依次进行如下操作: Interne选项--安全--Interne--自定义级别,找到"活动脚本",把他禁用掉.刷新一下刚才的网页,是不是可以了. 二、查看源文件法: 如果你刷新了之后,之前的内容没有了,就是说不显示了,那说明他显示文字就用的 document对象的 write 方法来进行的.那就进行如下操作,恢复上一次的操作(启用活动脚本),在进
网页上不可选中文字的那些事儿
扮老虎的猪
10-24 584
最近接触过一个项目，原来网页上可以选中文字，但是加了个播放器之后，文字都不能选了，一直怀疑是跟播放器不兼容，后来各种查资料，用了两天才从坑里出来，现在总结下： 1.查看是否设置了user-select样式，如果有，需要注释掉： { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none;
css 文本不被选中
孙健的专栏
11-21 1万+
body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }
监听子元素未知标签鼠标选中文字事件
最新发布
06-09
要监听子元素的选中文字事件，可以使用 `selectionchange` 事件。该事件会在用户选择文本或取消选择文本时触发，可以通过 `window.getSelection()` 方法获取当前的选区对象，从而获取选中的文本。 下面是一个示例代码： ```html <div id="parent"> <p>段落1</p> <div class="selectable">可选中元素</div> <a href="#">链接</a> </div> ``` ```javascript const parent = document.getElementById('parent'); parent.addEventListener('selectionchange', function(event) { const selection = window.getSelection(); const selectedText = selection.toString(); let element = selection.anchorNode.parentNode; while (element !== parent) { if (element.classList.contains('selectable')) { console.log('选中的文本：', selectedText); console.log('选中文本的父元素：', element); break; } element = element.parentNode; } }); ``` 在上面的代码中，我们将 `selectionchange` 事件绑定到了父元素 `div` 上，然后在事件处理程序中获取当前的选区对象，并通过 `toString()` 方法获取选中的文本。接下来，我们通过 `while` 循环遍历选区的父级元素，判断父级元素是否存在 `selectable` 类名。如果存在，就表示该元素是我们想要监听的元素类型，可以进行相应的处理。如果遍历到了父元素 `div`，仍然没有找到符合条件的元素，就可以退出循环。 需要注意的是，`selectionchange` 事件只有在文本被选中或取消选中后才会触发，因此无法实时监听正在选中的文本。如果需要实时监听选中的文本，可以考虑使用 `mouseup` 事件来模拟实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值