您的位置:首頁技術文章
文章詳情頁

javascript - 關于禁用文本選擇與復制的問題

瀏覽:107日期:2023-05-11 08:16:28

問題描述

樣式如下

.test1 { user-select: none;}html 結構如下

<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>

給其中的某幾項做了禁用本文選擇,單獨對某一項選擇時,確實能夠禁用選擇,其中的內容也無法復制,但是如果用cmd + a 進行全選時,會看到被禁用的項在頁面上顯示的是沒有被選擇,但此時內容能被復制下來。

接下來用 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);});

發現還是會在單獨選取時生效,但全部選取時就失敗了,所以想問下有什么辦法能夠在可選取的節點中穿插不可選取的節點,還能使得全選復制時只選取到可選取的內容。

問題解答

回答1:

可以換種思路,比如把文本放到css中。css中的文本就完全無法選中和復制了。隨手寫了個測試代碼:

JsFiddle: https://jsfiddle.net/d95cugaL/

JsBin: http://jsbin.com/nowoxuceta/e...

或者再進一步,直接把文本放在圖片上...

回答2:

這兒有個思路,就是你可以禁止ctrl+c的鼠標事件。//禁止ctrl復制

document.onkeydown=function(){ if((event.ctrlKey) && (window.event.keycode==67)){ event.returnValue=false; alert('Ctrl+C被禁止啦!'); }}

如果全選有問題,也可以禁止ctrl+A

標簽: JavaScript
相關文章:
国产综合久久一区二区三区