JS实现兼容各种浏览器的获取选择文本的方法【测试可用】


Posted in Javascript onJune 21, 2016

本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本被选中</title>
<style type = "text/css">
 #showSelected{
 margin:100px auto;
 width:100%;
 height:200px;
 background:#ececec;
 border:1px solid #ccc;
 }
</style>
<script type = "text/javascript">
//传入要获取其中选择文本的对象
function getSelectedText(e){
  //IE下获取选择文本
  if (document.selection) {
   return document.selection.createRange().text;
  }
  //firefox下获取选择文本
  else
   if (window.getSelection().toString()) {
    return window.getSelection().toString();
   }
   //firefox下获取input或textArea域的选择文本
   else
    if (e.selectionStart != undefined && e.selectionEnd != undefined) {
     var start = e.selectionStart;
     var end = e.selectionEnd;
     return e.value.substring(start, end);
    }
}
document.onmouseup = function(){
  var ta = document.getElementById("myDiv");
  document.getElementById("showSelected").innerHTML = getSelectedText(document.body);
}
</script>
</head>
  <body>
    <div id="myDiv">
      This is a prograph for testing!
    </div>
 <div id = "showSelected"></div>
  </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
jQuery之动画效果大全
Nov 09 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 #Javascript
JavaScript检测原始值、引用值、属性
Jun 20 #Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 #Javascript
JS实现鼠标框选效果完整实例
Jun 20 #Javascript
javascript事件冒泡简单示例
Jun 20 #Javascript
JS实现的打字机效果完整实例
Jun 20 #Javascript
jQuery实现的网格线绘制方法
Jun 20 #Javascript
You might like
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
自学python用什么系统好
2020/06/23 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
《自然之道》教学反思
2014/02/11 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
就业推荐表导师评语
2014/12/31 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
谢师宴学生致辞
2015/07/27 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS