您好,登錄后才能下訂單哦!
小編給大家分享一下html中怎么取消文本選中功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
在HTML中,可以使用user-select屬性取消文本選中,只需要給元素設(shè)置“user-select:none”代碼即可。user-select屬性用于設(shè)置用戶是否能夠選中文本,當(dāng)值為none時,表示文本不能被選擇。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
user-select屬性是css3新增的屬性,用于設(shè)置用戶是否能夠選中文本。可用于除替換元素外的所有元素,以下是user-select的主要用法和注意事項的說明,更多信息可參考如下css3文檔說明。
**user-select:**none | text | all | element
**默認(rèn)值:**text
適用范圍:除替換元素外的所有元素
none:文本不能被選擇
text:可以選擇文本
all:當(dāng)所有內(nèi)容作為一個整體時可以被選擇。如果雙擊或者在 上下文上點擊子元素,那么被選擇的部分將是以該子元素 向上回溯的最高祖先元素。
Element:可以選擇文本,但選擇范圍受元素邊界的約束
1.IE6-9不支持該屬性,但支持使用標(biāo)簽屬性 onselectstart=”return false;”來達(dá)到 user-select:none 的效果;Safari和Chrome也支持該標(biāo)簽屬性;
2.直到Opera12.5仍然不支持該屬性,但和IE6-9一樣,也支持使用私有的標(biāo)簽屬性 unselectable=”on” 來達(dá)到 user-select:none的效果;unselectable 的另一個值是off;
3.除Chrome和*Safari外,在其它瀏覽器中,如果將文本設(shè)置為 -ms-user-select:none;,則用戶將無法在該文本塊中開始選擇文本。不過,如果用戶在頁面的其他區(qū)域開始選擇文本,則用戶仍然可以繼續(xù)選擇將文本設(shè)置為 -ms-user-select:none; *的區(qū)域文本;
4.對應(yīng)的腳本特性為userSelect
css代碼:
.box{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
html代碼:
<div class="box" onselectstart="return false;" unselectable="on"> 這是測試數(shù)據(jù) </div>
效果:
看完了這篇文章,相信你對“html中怎么取消文本選中功能”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。