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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现简单评论功能
Aug 19 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php URL验证正则表达式
2011/07/19 PHP
thinkphp缓存技术详解
2014/12/09 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
深入学习python多线程与GIL
2019/08/26 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
python怎么判断模块安装完成
2020/06/19 Python
django 模型字段设置默认值代码
2020/07/15 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
毕业生求职信的经典写法
2014/01/31 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
行政处罚事先告知书
2015/07/01 职场文书