在網頁設計中,我們經常需要通過 CSS 來控制頁面元素的樣式以優化用戶體驗,而一些敏感的文本內容則需要被保護以避免被惡意復制。那么該如何實現 CSS + 文本禁止復制呢?以下將為你一一介紹。
CSS 方案:
body { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ }
這段 CSS 代碼中使用了 user-select 屬性,通過設置為 none 來禁止用戶選擇頁面中的文本內容。需要注意的是,該屬性在不同瀏覽器中兼容性可能存在差異,需要按照不同瀏覽器進行添加前綴。
文本方案:
...
這段文本方案將使用 JavaScript 來實現文本的禁止復制。其中,oncontextmenu、onselectstart 和 ondragstart 分別對應右鍵菜單、選擇和拖拽事件,設置 return false 即可禁止該事件的觸發。需要注意的是,該方法也存在不兼容的風險。
通過以上兩種方案,CSS + 文本禁止復制已經可以實現了。但需要注意的是,在一些特殊情況下,如依賴于復制功能的開發人員工具,可能需要靈活調整。