如何用javascript实现高亮选中的文本
巴扎黑
巴扎黑 2017-04-10 12:43:52
[JavaScript讨论组]

如何用javascript实现高亮选中的文本

我的提问似乎不太清晰。。就像“https://dev.vijos.org/problems/P1006”,选中描述部分的文本,会出现一个浮动的小框,可以选择颜色使得选中的文本高亮

巴扎黑
巴扎黑

全部回复(1)
PHPz

<span onmouseover="this.style.background='red'">哈哈哈</span>
<span onmouseover="this.style.background='yellow'">嘎嘎嘎</span>
<span onmouseover="this.style.background='green'">哇哇哇</span>

你早说啊!

首先你要全局监听ONMOUSEUP事件,好弹出那个小泡泡,对吧,这个很简单就不说了,
剩下的就是获得选中的部分,
例如这句话“南方周末”,你选中了“方周”
浏览器里面有个方法
var a = window.getSelection();
这个方法你可以获得一个对象,你面包含了你当前所选中的对象的一些信息。
然后 a.getRangeAt(); 之后你会获得选中的信息,
var b = a.getRangeAt();
其中有两个字段,即
b.endOffset(此时等于3)
b.startOffset(此时等于1)
这两个值代表着“方周”在“南方周末”的起始和结束位置,剩下就简单了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号