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简介_动力节点Java学院整理
Jul 04 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
微信小程序入门教程
2016/11/18 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python 图片验证码代码
2008/12/07 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python读取与处理netcdf数据方式
2020/02/14 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
Linux如何压缩可执行文件
2014/03/27 面试题
毕业生自荐信如何写
2014/03/24 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
小学生毕业评语
2014/12/26 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技