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中each循环的简单回滚操作
May 05 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现容器间的元素拖拽功能
Dec 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
PHP学习资料汇总与网址
2007/03/16 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
python异步存储数据详解
2019/03/19 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python any()函数的使用方法
2019/10/28 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python时间time模块处理大全
2020/10/25 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Java的for语句中break, continue和return的区别
2013/12/19 面试题
《金色的脚印》教后反思
2014/04/23 职场文书
社区文艺活动方案
2014/08/19 职场文书
党性观念心得体会
2014/09/03 职场文书
个人先进材料范文
2014/12/30 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
病房管理制度范本
2015/08/06 职场文书
情况说明书格式及范文
2019/06/24 职场文书
五年级作文之成长
2019/09/16 职场文书