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 DataTable实现前后台动态分页
Jun 17 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery实现手风琴特效
Jan 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
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
ie 调试javascript的工具
2009/04/29 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
《充气雨衣》教学反思
2014/04/07 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
离职报告格式
2014/11/04 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
会计工作检讨书
2015/02/19 职场文书
婚前保证书范文
2015/02/28 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
回复函格式及范文
2015/07/14 职场文书
婚庆答谢词大全
2015/09/29 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python