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 28 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery冲突问题解决方法
Jan 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&amp;MYSQL留言板源码
2020/07/19 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
关于PHP开发的9条建议
2015/07/27 PHP
制作特殊字的脚本
2006/06/26 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
详解Vite的新体验
2021/02/22 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
python实现简单神经网络算法
2018/03/10 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
运动会通讯稿500字
2014/02/20 职场文书
质量承诺书格式
2014/05/20 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
《猴王出世》教学反思
2016/02/23 职场文书