javascript（基于jQuery）實現(xiàn)鼠標獲取選中的文字示例【測試可用】
更新時間：2019年10月26日 10:08:18 作者：那誰家的，小誰
這篇文章主要介紹了javascript（基于jQuery）實現(xiàn)鼠標獲取選中的文字,涉及jQuery響應(yīng)鼠標事件及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了javascript實現(xiàn)鼠標獲取選中的文字。分享給大家供大家參考，具體如下：
HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p>你好啊，那誰家的小誰。聽說你在找一個人。我知道她在哪里。</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>你好啊，那誰家的小誰。聽說你在找一個人。我知道她在哪里。</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>
運行效果：
2、取消處于選中狀態(tài)的文字：
document.selection.empty(); IE9以下使用
window.getSelection().removeAllRanges(); 其他瀏覽器使用
$('p').mouseup(function(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
})
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jquery加載單文件vue組件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
基于 jQuery 實現(xiàn)鍵盤事件監(jiān)聽控件
這篇文章主要介紹了基于 jQuery 的鍵盤事件監(jiān)聽控件,需要的朋友可以參考下2019-04-04
jQuery中圖片展示插件highslide.js的簡單dom
Highslide是一個非常美觀的圖片燈箱插件，下面這篇文章主要給大家介紹了關(guān)于jQuery中圖片展示插件highslide.js的簡單dom，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-04-04
本文主要介紹jquery仿ps顏色拾取功能的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
jQuery Final Countdown是一款時尚的圓形進度條樣式的jQuery倒計時插件。本篇文章給大家分享利用jQuery實現(xiàn)漂亮的圓形進度條倒計時插件，感興趣的朋友一起看看吧2015-09-09
jquery focus(fn),blur(fn)方法實例代碼
jquery focus(fn),blur(fn)方法實例代碼，需要的朋友可以參考下。2011-12-12
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單登錄條件判斷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
基于jQuery實現(xiàn)以手風琴方式展開和折疊導航菜單
這篇文章主要介紹了基于jQuery實現(xiàn)以手風琴方式展開和折疊導航菜單的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了jquery easyUI中ajax異步校驗用戶名，感興趣的小伙伴們可以參考一下2016-08-08
Jquery 選中表格一列并對表格排序?qū)崿F(xiàn)原理
該實現(xiàn)的主要思想是：獲取鼠標點擊的表頭單元格的列號，遍歷數(shù)據(jù)行，獲取每個<tr>中的html，同時獲取每個<tr>標簽下對應(yīng)獲取到的列號的<td>標簽中的內(nèi)容，并取得<th>標簽的type屬性值，需要的朋友可以了解下2012-12-12