jqurey選中文字事件是web開發中常用的交互功能,它可以在用戶選中網頁中任意文本時,立即觸發事件進行處理。下面我們來詳細介紹這個功能。
$(document).ready(function(){ $('p').mousemove(function(event){ var selectedText = getSelectedText(); if(selectedText != ''){ console.log('您選中的文本是:' + selectedText); } }); }); function getSelectedText(){ var text = ''; if(window.getSelection){ text = window.getSelection().toString(); } else if(document.selection && document.selection.type != 'Control'){ text = document.selection.createRange().text; } return text; }
代碼中,我們使用了jQuery庫,首先在頁面加載完成后,綁定了一個鼠標移動事件,當用戶選中了文本時,獲取選中的文本內容,并且輸出到控制臺上。
在函數中,我們利用了window.getSelection()方法來獲取選中文字的值,但是它在IE8以及更早的版本下不被支持。因此,在IE瀏覽器中我們使用 document.selection.createRange().text來獲取選中的文本。通過判斷瀏覽器類型,我們便可以兼容各種瀏覽器。
在這個例子中,我們只是輸出選中文字,你也可以根據需求來進一步處理獲取到的文本內容,比如在選中文字后顯示一個浮動框,或是搜索與選中文字相關的內容等等。
上一篇css底部外邊距設置
下一篇jquery選中表格一行