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优先加载笔记代码
Sep 30 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
js倒计时抢购实例
2015/12/20 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
详解JS预解析原理
2020/06/16 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
在python中的socket模块使用代理实例
2014/05/29 Python
Python读写ini文件的方法
2015/05/28 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
python中加背景音乐如何操作
2020/07/19 Python
python3中编码获取网页的实例方法
2020/11/16 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
北京银河万佳Java面试题
2012/03/21 面试题
2016计算机专业毕业生自荐信
2016/01/28 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书