js实现文字选中分享功能
更新时间：2017年01月25日 09:58:45 作者：happyzgm
本文主要分享了js实现文字选中分享功能的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
总结：文字选中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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于JS正则表达式实现字符串中连续在一起的字符去重的相关资料,学会正则表达式对开发者而言是个非常有用的技能,很多功能可以简单的用一句正则来实现,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了微信小程序template模板引入的问题小结,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
原型链是JavaScript中继承的主要方法。本文重点给大家介绍JavaScript基于原型链的继承，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
这篇文章主要介绍了javascript 判断用户有没有操作页面的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
对于某一个页面内容繁多,如果我们滚动的时间较长,为了增加用户体验,我们需要实现点击某一个按钮,然后滚动到对应的区域,滚动的时候,右侧对应的分类实现高亮,所以本文给大家详细介绍讲解了js实现电梯导航,需要的朋友可以参考下2023-10-10
JavaScript 中的单例内置对象Global 与 Math
这篇文章主要介绍了JavaScript 中的单例内置对象Global与Math，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
使用Javascript同时提交多个Web表单的方法2009-12-12
这篇文章主要介绍了js中url对象化管理的相关知识以及用法介绍，有需要的朋友跟着小编一起学习下。2017-12-12
这篇文章主要为大家介绍了JavaScript架构前端监控搭建过程步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
scroll-view可实现一个可滚动的视图区域,下面这篇文章主要给大家介绍了关于小程序使用scroll-view实现一个滑动列表功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
最新评论