javascript - 關于禁用文本選擇與復制的問題
問題描述
樣式如下.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
相關文章：
1. android - NavigationView 的側滑菜單中如何保存新增項（通過程序添加）2. 老師 我是一個沒有學過php語言的準畢業生 我希望您能幫我一下3. 編程學習心得分享（共80條）4. 關于thinkphp 5.1中，ajax提交數據url的格式寫法，加花括號就出錯，請老師指點5. php7.3.4中怎么開啟pdo驅動6. tp5 不同控制器中的變量調用問題7. 提示語法錯誤語法錯誤: unexpected ’abstract’ (T_ABSTRACT)8. 這段代碼既不提示錯誤也看不到結果，請老師明示錯在哪里，謝謝！9. ueditor上傳服務器提示后端配置項沒有正常加載，求助！！！！！10. php - 一個操作請求多個服務如何保證數據的安全？
網公網安備