css(html)文字不能被选中

最新推荐文章于 2023-12-18 16:24:57 发布

JokerMock

最新推荐文章于 2023-12-18 16:24:57 发布

阅读量411

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/zzll1216/article/details/128478292

版权

给标签class设置样式

.selsct {
	-webkit-user-select:none;
     -moz-user-select:none;
     -ms-user-select:none;
     user-select:none;
     }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JokerMock

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css(html)文字不能被选中

css(html)文字不能被选中,给标签class设置样式
复制链接

扫一扫

html按钮不可选中,如何使HTML文本不可选择

weixin_28920823的博客

06-23

1691

小编典典用普通的HTML无法做到这一点，因此JSF在这里也无法为您做很多事情。如果您仅针对体面的浏览器，则只需使用CSS3：.unselectable {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none...

css 让文字不被选中之-moz-user-select 属性介绍

09-25

">这段文字也不能被选中。 ``` 这种方法虽然简单，但可能会影响用户的其他交互体验，例如阻止他们有意选择和复制文本。 `-moz-user-select` 相关的其他 CSS 属性包括 `-moz-user-focus`、`-moz-user-input` 和 `-...

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

html禁止文本被选中（多浏览器兼容）

sk19969306105的博客

09-08

185

user-select: none;

html设置不可选中,CSS&JS指定元素不可被选中方法

weixin_32647107的博客

06-16

2556

一、CSS3的解决方法：user-select:body{-webkit-user-select: none; /* Chrome / Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE 10+ */user-select: none;}ser-select属性：auto:默认，可...

CSS 文本设置可选中和不可选中

weixin_51951576的博客

12-18

889

如果仍然不能进行选中，可能的原因是其他 CSS 样式或 JavaScript 代码导致无法选择文本，例如全局CSS的代码文件设置了。覆盖了你的样式导致了样式失效，文本不能选中。

解决网页文字无法选中或复制

最新发布

02-03

- 更新界面：将被选中的名字显示在 HTML 结果区域，可能配合 CSS 动画效果，如淡入淡出，增加互动感。 - 错误处理：检查输入数据的有效性，防止出现无效点名情况。 - 重置功能：提供一个重置按钮，清除已点名的...

html5双击选中文字高亮显示特效代码

03-20

在HTML5中，实现双击选中文字高亮显示的特效是通过结合JavaScript和CSS来完成的。这个特效使得用户在网页上双击文本时，选中的文字会呈现出高亮的状态，增强了用户的交互体验。接下来，我们将深入探讨如何实现这一...

css设置页面文字不能被选中

芊芊寻的博客

11-01

2万+

实现通过css实现页面文字不能被选中 .cannotselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select...

.html文件以及网页的文字无法选中复制

一蓑烟雨任平生

09-01

662

这是因为js的防复制脚本代码在作怪，按下F12打开控制台，输入 var eles = document.getElementsByTagName('*'); for (var i = 0; i < eles.length; i++) { eles[i].style.userSelect = 'text'; } 就可以选取啦

html 文字不可选择,有没有办法在HTML页面上使文本无法选择？

weixin_42520025的博客

06-03

330

慕婉清6462132在大多数浏览器中，这可以使用CSS实现：*.unselectable{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;/*IntroducedinIE10.Seehttp://ie.microsoft.com/tes...

css 设置文字不能被选中

qq_41287158的博客

09-22

401

/设置文字不能被选中以下为css样式/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;

html页面禁止用户选中文字，禁止文字被选中，兼容式禁止选中文字效果

01-09

846

记录一下css常用的一个效果，禁止文字的选中： .no-select{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-use...

CSS 不可选中文字

臧小川的博客

07-28

894

Document 我是一段不愿意分享的文字 // 1 contextmenu 我们可以禁用右键菜单

css：设置页面文字不能被选中

胡世林的博客

05-11

3970

本来是打算使用onselectstart的。。但是怎么试都是爆炸。。所以直接用css分享下： body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }...

在 html页面中设置图片无法被选中

做GIS梦的人

08-15

1万+

如上图，在html页面中，图片和文字被选中将影响外观。解决方案，在元素对应的CSS样式中加入： -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;

微信小程序选中文字变色，没被选中不变色

05-24

要实现微信小程序中选中文字变色的效果，可以通过使用 `rich-text` 组件来实现。具体步骤如下： 1. 将需要展示的文本放在 `rich-text` 标签中，并设置一个唯一的 `id` 属性，例如： ```html <rich-text id="myText" nodes="{{richTextNodes}}"></rich-text> ``` 2. 在 `wxml` 文件中添加以下样式： ```css ::selection { background-color: #FFC0CB; /* 设置选中文字的背景色 */ color: #000; /* 设置选中文字的文本颜色 */ } #myText { user-select: none; /* 禁止用户选择文本 */ } ``` 3. 在 `js` 文件中，定义 `richTextNodes` 数据，用于渲染 `rich-text` 组件的内容。当用户选中文本时，`bindtap` 事件会触发，可以通过 `wx.createSelectorQuery()` 获取选中的文本节点，并设置 `style` 属性，以达到选中文字变色的效果，例如： ```javascript Page({ data: { richTextNodes: [ { type: 'text', text: '这是一段需要展示的文本' } ] }, // 绑定 tap 事件，获取选中的文本节点 bindtap: function() { wx.createSelectorQuery().select('#myText').boundingClientRect(function(rect) { // 获取选中文本的开始和结束位置 let start = rect.startOffset; let end = rect.endOffset; // 获取选中文本的父节点 let parent = rect.parentRect; // 获取选中文本节点的数组 let nodes = rect.nodes; // 遍历选中文本节点数组，设置选中文本的样式 for (let i = 0; i < nodes.length; i++) { let node = nodes[i]; if (node.nodeType === 3) { // 文本节点 let text = node.textContent; let textLength = text.length; let textStart = start - node.start; let textEnd = end - node.start; if (textStart < textLength && textEnd > 0) { if (textStart < 0) { textStart = 0; } if (textEnd > textLength) { textEnd = textLength; } let subText = text.substring(textStart, textEnd); let newText = text.replace(subText, `<span style="background-color:#FFC0CB">${subText}</span>`); node.textContent = ''; node.insertAdjacentHTML('beforeend', newText); } } } }).exec(); } }) ``` 这样，当用户选中文本时，被选中的文本会变色，未被选中的文本保持原来的颜色。

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

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

提交