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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现日历效果
Sep 11 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python中import机制详解
2017/11/14 Python
python五子棋游戏的设计与实现
2019/06/18 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Python-openCV开运算实例
2020/07/05 Python
德国网上药房:Apotal
2017/04/04 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
网络营销计划
2015/01/17 职场文书
组织委员竞选稿
2015/11/21 职场文书
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL