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