js實(shí)現(xiàn)文字選中分享功能
更新時(shí)間：2017年01月25日 09:58:45 作者：happyzgm
本文主要分享了js實(shí)現(xiàn)文字選中分享功能的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
總結(jié)：文字選中IE和其他瀏覽器不一樣
在IE中文字選中后鼠標(biāo)抬起，圖片顯現(xiàn)觸發(fā)有點(diǎn)快所以用定時(shí)器。
<!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">
文字的選中功能是不太常用的功能，多出現(xiàn)在文本編輯器中，或是文本域之類的光標(biāo)處理上。所以呢，使用的一些屬性也并不是常見的。在IE瀏覽器下使用的是createTextRange而Firefox/chrome等現(xiàn)代瀏覽器下使用的是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';
}
}
//點(diǎn)擊oP阻止冒泡到document上
oP.onclick=function(ev){
var ev=ev||window.event
ev.cancelBubble=true
}
document.onclick=function(){
oDiv.style.display='none';
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JS正則表達(dá)式實(shí)現(xiàn)字符串中連續(xù)在一起的字符去重
這篇文章主要給大家介紹了關(guān)于JS正則表達(dá)式實(shí)現(xiàn)字符串中連續(xù)在一起的字符去重的相關(guān)資料,學(xué)會(huì)正則表達(dá)式對(duì)開發(fā)者而言是個(gè)非常有用的技能,很多功能可以簡(jiǎn)單的用一句正則來(lái)實(shí)現(xiàn),需要的朋友可以參考下2023-11-11
微信小程序template模板引入的問(wèn)題小結(jié)
這篇文章主要介紹了微信小程序template模板引入的問(wèn)題小結(jié),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
原型鏈?zhǔn)荍avaScript中繼承的主要方法。本文重點(diǎn)給大家介紹JavaScript基于原型鏈的繼承，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
這篇文章主要介紹了javascript 判斷用戶有沒有操作頁(yè)面的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-10-10
詳細(xì)講解js實(shí)現(xiàn)電梯導(dǎo)航的實(shí)例
對(duì)于某一個(gè)頁(yè)面內(nèi)容繁多,如果我們滾動(dòng)的時(shí)間較長(zhǎng),為了增加用戶體驗(yàn),我們需要實(shí)現(xiàn)點(diǎn)擊某一個(gè)按鈕,然后滾動(dòng)到對(duì)應(yīng)的區(qū)域,滾動(dòng)的時(shí)候,右側(cè)對(duì)應(yīng)的分類實(shí)現(xiàn)高亮,所以本文給大家詳細(xì)介紹講解了js實(shí)現(xiàn)電梯導(dǎo)航,需要的朋友可以參考下2023-10-10
JavaScript?中的單例內(nèi)置對(duì)象Global?與?Math
這篇文章主要介紹了JavaScript?中的單例內(nèi)置對(duì)象Global與Math，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
用Javascript同時(shí)提交多個(gè)Web表單的方法
使用Javascript同時(shí)提交多個(gè)Web表單的方法2009-12-12
這篇文章主要介紹了js中url對(duì)象化管理的相關(guān)知識(shí)以及用法介紹，有需要的朋友跟著小編一起學(xué)習(xí)下。2017-12-12
JavaScript架構(gòu)前端監(jiān)控搭建過(guò)程步驟
這篇文章主要為大家介紹了JavaScript架構(gòu)前端監(jiān)控搭建過(guò)程步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
小程序使用scroll-view實(shí)現(xiàn)一個(gè)滑動(dòng)列表功能
scroll-view可實(shí)現(xiàn)一個(gè)可滾動(dòng)的視圖區(qū)域,下面這篇文章主要給大家介紹了關(guān)于小程序使用scroll-view實(shí)現(xiàn)一個(gè)滑動(dòng)列表功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08