javascript（基于jQuery）實(shí)現(xiàn)鼠標(biāo)獲取選中的文字示例【測(cè)試可用】

更新時(shí)間：2019年10月26日 10:08:18 作者：那誰家的，小誰

這篇文章主要介紹了javascript（基于jQuery）實(shí)現(xiàn)鼠標(biāo)獲取選中的文字,涉及jQuery響應(yīng)鼠標(biāo)事件及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)鼠標(biāo)獲取選中的文字。分享給大家供大家參考，具體如下：

HTML部分：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>JS Bin</title>
</head>
<body>
<p>你好啊，那誰家的小誰。聽說你在找一個(gè)人。我知道她在哪里。</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>

1、獲取選中的文字：

document.selection.createRange().text; IE9以下使用

window.getSelection().toString(); 其他瀏覽器使用

$('p').mouseup(function(){
  var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
  alert(txt) ;
})

完整demo示例：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>JS Bin</title>
</head>
<body>
<p>你好啊，那誰家的小誰。聽說你在找一個(gè)人。我知道她在哪里。</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$('p').mouseup(function(){
  var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
  alert(txt) ;
})
</script>
</body>
</html>

運(yùn)行效果：

2、取消處于選中狀態(tài)的文字：

document.selection.empty(); IE9以下使用

window.getSelection().removeAllRanges(); 其他瀏覽器使用

$('p').mouseup(function(){
  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
})

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery加載單文件vue組件的方法
這篇文章主要介紹了jquery加載單文件vue組件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
基于 jQuery 實(shí)現(xiàn)鍵盤事件監(jiān)聽控件
這篇文章主要介紹了基于 jQuery 的鍵盤事件監(jiān)聽控件,需要的朋友可以參考下
2019-04-04
jQuery中圖片展示插件highslide.js的簡(jiǎn)單dom
Highslide是一個(gè)非常美觀的圖片燈箱插件，下面這篇文章主要給大家介紹了關(guān)于jQuery中圖片展示插件highslide.js的簡(jiǎn)單dom，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
jquery仿ps顏色拾取功能
本文主要介紹jquery仿ps顏色拾取功能的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
jQuery Final Countdown是一款時(shí)尚的圓形進(jìn)度條樣式的jQuery倒計(jì)時(shí)插件。本篇文章給大家分享利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件，感興趣的朋友一起看看吧
2015-09-09
jquery focus(fn),blur(fn)方法實(shí)例代碼
jquery focus(fn),blur(fn)方法實(shí)例代碼，需要的朋友可以參考下。
2011-12-12
jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
基于jQuery實(shí)現(xiàn)以手風(fēng)琴方式展開和折疊導(dǎo)航菜單
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)以手風(fēng)琴方式展開和折疊導(dǎo)航菜單的相關(guān)資料,需要的朋友可以參考下
2016-01-01
jquery easyUI中ajax異步校驗(yàn)用戶名
這篇文章主要為大家詳細(xì)介紹了jquery easyUI中ajax異步校驗(yàn)用戶名，感興趣的小伙伴們可以參考一下
2016-08-08
Jquery 選中表格一列并對(duì)表格排序?qū)崿F(xiàn)原理
該實(shí)現(xiàn)的主要思想是：獲取鼠標(biāo)點(diǎn)擊的表頭單元格的列號(hào)，遍歷數(shù)據(jù)行，獲取每個(gè)<tr>中的html，同時(shí)獲取每個(gè)<tr>標(biāo)簽下對(duì)應(yīng)獲取到的列號(hào)的<td>標(biāo)簽中的內(nèi)容，并取得<th>標(biāo)簽的type屬性值，需要的朋友可以了解下
2012-12-12