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 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
javascript常用经典算法详解
Jan 11 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
常用的 JS 排序算法 整理版
Apr 05 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
使用php实现截取指定长度
2013/08/06 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php中fsockopen用法实例
2015/01/05 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python的mysqldb安装步骤详解
2017/08/14 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python 发送邮件方法总结
2020/08/10 Python
python中remove函数的踩坑记录
2021/01/04 Python
匡威德国官网:Converse德国
2019/01/26 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
单位创先争优活动方案
2014/01/26 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015年父亲节寄语
2015/03/23 职场文书
详解Redis主从复制实践
2021/05/19 Redis
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
HTML基础详解(上)
2021/10/16 HTML / CSS
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL