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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery实现计算器功能
Oct 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
django settings.py 配置文件及介绍
2019/07/15 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
车间机修工岗位职责
2014/02/28 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
个人自荐书范文
2015/03/09 职场文书
贫困证明怎么写
2015/06/16 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
Python保存并浏览用户的历史记录
2022/04/29 Python