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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP新手上路(九)
2006/10/09 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
js 实现菜单上下显示附效果图
2013/11/21 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
JavaScript函数详解
2015/02/27 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python 实现数组相减示例
2019/12/27 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python爬虫工具例举说明
2020/11/30 Python
Python 随机按键模拟2小时
2020/12/30 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
校园创业策划书
2014/01/14 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
python_tkinter事件类型详情
2022/03/20 Python
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python