javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】


Posted in jQuery onOctober 26, 2019

本文实例讲述了javascript实现鼠标获取选中的文字。分享给大家供大家参考,具体如下:

HTML部分:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>JS Bin</title>
</head>
<body>
<p>你好啊,那谁家的小谁。听说你在找一个人。我知道她在哪里。</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>

1、获取选中的文字:

document.selection.createRange().text; IE9以下使用

window.getSelection().toString(); 其他浏览器使用

$('p').mouseup(function(){
  var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
  alert(txt) ;
})

完整demo示例:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>JS Bin</title>
</head>
<body>
<p>你好啊,那谁家的小谁。听说你在找一个人。我知道她在哪里。</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$('p').mouseup(function(){
  var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
  alert(txt) ;
})
</script>
</body>
</html>

运行效果:

javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】

2、取消处于选中状态的文字:

document.selection.empty(); IE9以下使用

window.getSelection().removeAllRanges(); 其他浏览器使用

$('p').mouseup(function(){
  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
})

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jquery实现购物车基本功能
Oct 25 #jQuery
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
jQuery实现轮播图源码
Oct 23 #jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
You might like
php过滤危险html代码
2008/08/18 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
百度地图API使用方法详解
2015/08/25 PHP
php对象工厂类完整示例
2018/08/09 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
深入理解python中的atexit模块
2017/03/07 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
六个一活动实施方案
2014/03/21 职场文书
程序员求职信
2014/04/16 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
2015年班组长工作总结
2015/04/10 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
Mysql Online DDL的使用详解
2021/05/20 MySQL
详解flex:1什么意思
2022/07/23 HTML / CSS