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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
简单实现js放大镜效果
Jul 24 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
15种PHP Encoder的比较
2007/03/06 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
python日志记录模块实例及改进
2017/02/12 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
机器学习10大经典算法详解
2017/12/07 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
django和flask哪个值得研究学习
2020/07/31 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
历史专业个人求职信分享
2013/12/20 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
门卫岗位职责
2015/02/09 职场文书
回复函格式及范文
2015/07/14 职场文书
初中信息技术教学反思
2016/02/16 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python