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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP实现文件安全下载
2006/10/09 PHP
php中目录,文件操作详谈
2007/03/19 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
python中xrange和range的区别
2014/05/13 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
办理生育手续介绍信
2014/01/14 职场文书
高一地理教学反思
2014/01/18 职场文书
工地宣传标语
2014/06/18 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
高中开学感言
2015/08/01 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
全新239军机修复记
2022/04/05 无线电