javascript - 關(guān)于禁用文本選擇與復(fù)制的問(wèn)題
問(wèn)題描述
樣式如下.test1 { user-select: none;}html 結(jié)構(gòu)如下
<body><p class='content'> <p class='test2'>111</p> <p class='test1'>222</p> <p class='test2'>333</p> <p class='test1'>444</p> <p class='test2'>555</p></p></body>
給其中的某幾項(xiàng)做了禁用本文選擇，單獨(dú)對(duì)某一項(xiàng)選擇時(shí)，確實(shí)能夠禁用選擇，其中的內(nèi)容也無(wú)法復(fù)制，但是如果用cmd + a 進(jìn)行全選時(shí)，會(huì)看到被禁用的項(xiàng)在頁(yè)面上顯示的是沒(méi)有被選擇，但此時(shí)內(nèi)容能被復(fù)制下來(lái)。
接下來(lái)用 js 去控制：[].forEach.call(document.querySelectorAll(’.test1’), (node) => { node.addEventListener(’copy’, (e) => { e.stopPropagation(); e.preventDefault(); console.log(1); return false; }, true); node.addEventListener(’selectstart’, (e) => { e.stopPropagation(); e.preventDefault(); console.log(2); return false; }, true);});
發(fā)現(xiàn)還是會(huì)在單獨(dú)選取時(shí)生效，但全部選取時(shí)就失敗了，所以想問(wèn)下有什么辦法能夠在可選取的節(jié)點(diǎn)中穿插不可選取的節(jié)點(diǎn)，還能使得全選復(fù)制時(shí)只選取到可選取的內(nèi)容。
問(wèn)題解答
回答1：可以換種思路，比如把文本放到css中。css中的文本就完全無(wú)法選中和復(fù)制了。隨手寫(xiě)了個(gè)測(cè)試代碼：
JsFiddle: https://jsfiddle.net/d95cugaL/
JsBin: http://jsbin.com/nowoxuceta/e...
或者再進(jìn)一步，直接把文本放在圖片上...
回答2：這兒有個(gè)思路，就是你可以禁止ctrl+c的鼠標(biāo)事件。//禁止ctrl復(fù)制
document.onkeydown=function(){ if((event.ctrlKey) && (window.event.keycode==67)){ event.returnValue=false; alert('Ctrl+C被禁止啦！'); }}
如果全選有問(wèn)題，也可以禁止ctrl+A
相關(guān)文章：
1. 一個(gè)mysql聯(lián)表查詢的問(wèn)題2. mysql - 一個(gè)表和多個(gè)表是多對(duì)多的關(guān)系，該怎么設(shè)計(jì)3. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤？4. html5 - iOS的webview加載出來(lái)的H5網(wǎng)頁(yè)，怎么修改html標(biāo)簽select的樣式字體？5. python如何不改動(dòng)文件的情況下修改文件的 修改日期6. javascript - git clone 下來(lái)的項(xiàng)目 想在本地運(yùn)行 npm run install 報(bào)錯(cuò)7. java - 我現(xiàn)在一個(gè)servlet中有調(diào)用socket訪問(wèn)，作為socket的客戶端，8. 主從備份 - 跪求mysql 高可用主從方案9. mysql主從 - 請(qǐng)教下mysql 主動(dòng)-被動(dòng)模式的雙主配置 和 主從配置在應(yīng)用上有什么區(qū)別？10. python 如何實(shí)現(xiàn)PHP替換圖片 鏈接
網(wǎng)公網(wǎng)安備