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 相关文章推荐
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
vue小图标favicon不显示的解决方案
Sep 19 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
php简单生成随机数的方法
2015/07/30 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
js如何打印object对象
2015/10/16 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python列表生成器的循环技巧分享
2015/03/06 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python list多级排序知识点总结
2019/10/23 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
python MD5加密的示例
2020/10/19 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
4s店总经理岗位职责
2013/12/31 职场文书
远程教育心得体会
2014/01/03 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
新年主持词
2014/03/27 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
2014年财政局工作总结
2014/12/09 职场文书
骨干教师个人总结
2015/02/11 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书