js实现文字选中分享功能


Posted in Javascript onJanuary 25, 2017

总结:文字选中IE和其他浏览器不一样

在IE中文字选中后鼠标抬起,图片显现触发有点快所以用定时器。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
#p1{width: 300px;}
#div1{display: none;position: absolute;}
img{width:26px;height:26px;}
</style>
</head>
<body>
<p id="p1">
 文字的选中功能是不太常用的功能,多出现在文本编辑器中,或是文本域之类的光标处理上。所以呢,使用的一些属性也并不是常见的。在IE浏览器下使用的是createTextRange而Firefox/chrome等现代浏览器下使用的是setSelectionRange。
</p>
<div id='div1'><img src='http://cdn.attach.qdfuns.com/notes/pics/201701/23/221744ud9ggjjjgg85e90m.gif.editor.gif'></div>
<script type="text/javascript">
function selectText(){
 if(document.selection){
 //IE
 return document.selection.createRange().text
 }else{
 //ff chrom
 return window.getSelection().toString()
 }
}
var oP=document.getElementById('p1')
var oDiv=document.getElementById('div1')
oP.onmouseup=function(ev){
 var ev=ev||event
 var left=ev.clientX
 var top=ev.clientY
 if(selectText().length>10){
 setTimeout(function(){
 oDiv.style.display='block';
 oDiv.style.left=left+'px'
 oDiv.style.top=top+'px'
 },100)
 }else{
 oDiv.style.display='none';
 }
}
//点击oP阻止冒泡到document上
oP.onclick=function(ev){
 var ev=ev||window.event
 ev.cancelBubble=true
}
document.onclick=function(){
 oDiv.style.display='none';
}
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
深入了解JavaScript 防抖和节流
Sep 12 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 #Javascript
jquery实现拖动效果(代码分享)
Jan 25 #Javascript
angular forEach方法遍历源码解读
Jan 25 #Javascript
three.js实现围绕某物体旋转
Jan 25 #Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 #Javascript
angular和BootStrap3实现购物车功能
Jan 25 #Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 #Javascript
You might like
Protoss建筑一览
2020/03/14 星际争霸
IStream与TStream之间的相互转换
2008/08/01 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
Ajax::prototype 源码解读
2007/01/22 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
python修改操作系统时间的方法
2015/05/18 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
详解Python中的测试工具
2019/06/09 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
2014年售票员工作总结
2014/11/19 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
pytorch 实现多个Dataloader同时训练
2021/05/29 Python