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