快捷導(dǎo)航

js結(jié)合css實(shí)現(xiàn)登錄后才能復(fù)制的效果實(shí)例

更新時(shí)間：2023年07月15日 16:14:25 投稿：yin

很多網(wǎng)站都有登錄后才能復(fù)制的限制，什么原理呢？css屬性u(píng)ser-select:none，通常會(huì)采用這種方式來(lái)禁止復(fù)制文本。但瀏覽開發(fā)者工具-審查元素，取消此樣式后，就可以選中文本了。想要完整地禁止復(fù)制，還需要通過(guò)js控制選擇的內(nèi)容。

很多網(wǎng)站都有登錄后才能復(fù)制的限制，什么原理呢。？設(shè)置css屬性u(píng)ser-select:none，此時(shí)鼠標(biāo)無(wú)法實(shí)現(xiàn)選中文本，也就無(wú)法復(fù)制文本，通常會(huì)采用這種方式來(lái)禁止復(fù)制文本。但瀏覽開發(fā)者工具-審查元素，取消此樣式后，就可以選中文本了。想要完整地禁止復(fù)制，還需要通過(guò)js控制選擇的內(nèi)容。

user-select：none

該屬性用來(lái)控制用戶能否選中文本。其對(duì)應(yīng)常用的值：

none：元素及其子元素的文本不可選中。
auto：具體取值取決于一系列條件，具體如下：* 在 ::before 和 ::after 偽元素上，采用的屬性值是 none* 如果元素是可編輯元素，則采用的屬性值是 contain* 否則，如果此元素的父元素的 user-select 采用的屬性值為 all，則該元素采用的屬性值也為 all* 否則，如果此元素的父元素的 user-select 采用的屬性值為 none，則該元素采用的屬性值也為 none* 否則，采用的屬性值為 text
text：用戶可以選中文本。
all：當(dāng)單擊文本時(shí)，會(huì)選中這一行文本。

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

jquery禁用

禁用復(fù)制、粘貼、剪切

$(document).on("cut copy paste", function(e) {
        e.preventDefault();
});

禁用右鍵

$(document).on("contextmenu", function(e) {
    e.preventDefault();
});

上述的代碼只是阻止了瀏覽器自帶的操作。如果用戶想要復(fù)制、粘貼和剪切網(wǎng)頁(yè)中的文本，依然可以通過(guò)瀏覽器菜單或使用快捷鍵來(lái)執(zhí)行。

js屏蔽選中指定內(nèi)容

window.addEventListener('copy',function(){
	const selection = window.getSelection();
	const copyNode = selection.getRangeAt(0).cloneContents();
}); 
const div = document.createElement('div');
div.appendChild(copyNode);
// 通過(guò)getComputedStyle獲取style值，需要將節(jié)點(diǎn)掛載到dom樹上，因此append到body
document.body.appendChild(div);
const nodelist = div.childNodes;
for (let i = 0; i < nodelist.length; i++) {
	const curnode = nodelist[i];
	const nodeType = curnode.nodeType;
	// 將節(jié)點(diǎn)類型為元素節(jié)點(diǎn)，并且設(shè)置了user-select:none的節(jié)點(diǎn)從復(fù)制的內(nèi)容中過(guò)濾掉
	if (nodeType === 1 && window.getComputedStyle(curnode).userSelect === 'none') {div.removeChild(curnode);}
}
// 獲取過(guò)濾后的數(shù)據(jù)
const cpt = div.innerHTML; 
selection.select(cpt); 
document.execCommand('copy');
//復(fù)制到剪切板

結(jié)論

到此這篇關(guān)于js結(jié)合css實(shí)現(xiàn)登錄后才能復(fù)制的效果實(shí)例的文章就介紹到這了,更多相關(guān)js+css實(shí)現(xiàn)登錄后才能復(fù)制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！