今天的文章主題是關于javascript如何禁止選擇文字。有時候我們想要在網頁上顯示一些敏感信息或者僅僅是不想被用戶復制粘貼,我們可以用javascript來禁止用戶選擇文字。下面我會給出幾個例子來說明如何操作。
首先我們看一下如何禁止整個頁面的文字選擇。我們可以在body標簽中添加一個onselectstart屬性來禁止,如下代碼所示:
<body onselectstart="return false;"> ... </body>這樣做就可以禁止用戶選中整個頁面的文字。但是當我們需要只禁止某個元素的文字選擇時,我們需要使用CSS。CSS中有一個user-select屬性,用來控制元素內部的可選范圍。我們可以將該屬性的值設置成none來禁止元素內部的文字選擇。下面是一個例子:
<div style="user-select: none;"> 這是一個不能選中的div。 </div>在實際操作中,我們通常不會使用內聯樣式,而是通過CSS來設置需要禁止選擇的元素。下面是一個css文件的例子:
.unselectable { -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ -webkit-user-select: none; /* Chrome, Safari, and Opera */ user-select: none; }上述代碼中,我們定義了一個類名為".unselectable"的樣式,該樣式將禁止元素內的文字選擇。我們可以在需要禁止選擇的元素中添加該類名即可。
除了上述方法外,我們還可以使用javascript來禁止選擇文本。下面是一個實現方式:
window.onload = function() { disableSelection(document.body); }; function disableSelection(target) { if (typeof target.onselectstart != 'undefined') { target.onselectstart = function() { return false; }; } else if (typeof target.style.MozUserSelect != 'undefined') { target.style.MozUserSelect = 'none'; } else if (typeof target.style.webkitUserSelect != 'undefined') { target.style.webkitUserSelect = 'none'; } else if (typeof target.style.userSelect != 'undefined') { target.style.userSelect = 'none'; } else { target.onmousedown = function() { return false; }; } }上述代碼中,我們在頁面加載時調用了disableSelection函數來禁止文本選擇。該函數會檢測瀏覽器類型,然后設置相應的CSS屬性或者事件。
總結一下,禁止選擇文字是保護網站信息的一種方法。我們可以通過設置CSS屬性、HTML屬性或者javascript來實現。上述例子中,我們使用了多種方式,您可以根據自己的需要選擇適合自己的方法來實現。希望本文對您有所幫助。
下一篇css圖片右對齊代碼