js實現(xiàn)文字選中分享功能
更新時間：2017年01月25日 09:58:45 作者：happyzgm
本文主要分享了js實現(xiàn)文字選中分享功能的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
總結：文字選中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)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
JavaScript（簡稱“JS”）是一種具有函數(shù)優(yōu)先的輕量級,解釋型或即時編譯型的編程語言,本文主要為大家介紹了JavaScript中三種常見引入方式,希望對大家有所幫助2024-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的前端分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
怎么樣讓多個輸入框中的內(nèi)容同時變化？一般又要兼容IE與firefox2010-01-01
下面小編就為大家?guī)硪黄赼jax和jsonp的原生封裝(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Javascript中判斷一個值是否為undefined的方法詳解
這篇文章給大家詳細介紹了在Javascript中如何判斷一個值是否為undefined，對大家的日常工作和學習很有幫助，下面來一起看看吧。2016-09-09
這篇文章主要給大家介紹了關于ES6中Set與WeakSet集合的相關資料,Set是ES6給開發(fā)者帶來的一種新的數(shù)據(jù)結構,你可以理解為值的集合,WeakSet結構同樣不會存儲重復的值,但它的成員必須是對象類型的值,需要的朋友可以參考下2021-07-07
在JavaScript中，有3個關鍵字可以聲明變量：var、const和let，其中var在ECMAScript的所有版本中都可以使用，而const和let只能在ECMAScript 6及更晚的版本中使用，本文就來說說二者的區(qū)別，感興趣的可以了解一下2022-11-11
Bootstrap企業(yè)網(wǎng)站實戰(zhàn)項目4
這篇文章主要為大家分享了Bootstrap企業(yè)網(wǎng)站實戰(zhàn)項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
e.button W3C是獲取鼠標按鍵 0 表示左鍵 1表示中鍵 2表示右鍵 而IE瀏覽器則是 1表示左鍵 4表示中間 2表示右鍵 這里的IE瀏覽器主要是IE8以下的瀏覽器，感興趣的朋友可以參考下哈2013-04-04
事件機制是幾乎所有開發(fā)語言都有的機制，并不是deviceone的獨創(chuàng)，在某些語言稱之為消息(Event),有些地方稱之為(Message).接下來通過本文給大家介紹JS事件機制的理解 ，需要的朋友一起學習吧2023-04-04