使用 CSS 用户选择控制选择
IE10 平臺(tái)預(yù)覽 4 包括一個(gè)新的 CSS 屬性的支持-ms-user-select,這使得 Web 開(kāi)發(fā)者控制完全可以選擇什么的文本,在其網(wǎng)站上更容易。如果你是看我一整天都在我的工作站,您會(huì)注意到我讀計(jì)算機(jī)上時(shí),我選擇的文本。我不是只有一個(gè)人讀起來(lái)像這 ;選擇文本在互聯(lián)網(wǎng)上是重要在很多其他方案。
考慮一個(gè)典型的新聞網(wǎng)站。大多數(shù)網(wǎng)頁(yè)將包括新聞文章,其中,用戶(hù)需要能夠選擇,因?yàn)樗麄冏x通過(guò)選擇文本或因?yàn)樗麄兿胍蚕韮?nèi)容的內(nèi)容。此外在新聞網(wǎng)頁(yè)上有一些菜單和鏈接到網(wǎng)站的其他部分。用戶(hù)可能不需要選擇這些項(xiàng)目。使用-ms-user-select,Web 開(kāi)發(fā)人員可以指定所選文本是新聞文章中允許使用,但不是允許在菜單中。
IE 試駕站點(diǎn)包括執(zhí)行此操作的示例。
設(shè)置-ms-user-select:none上整個(gè)頁(yè)面,然后設(shè)置 -ms-user-select:element元素包含在博客上后允許只被選中的博客文章的內(nèi)容。-ms-user-select:element是一個(gè)新的屬性,首先引入的 IE,我們認(rèn)為可以在很多情況下有用。設(shè)置-ms-user-select:element意味著用戶(hù)可以選擇該元素的文本,但是,所選內(nèi)容將受到限制的元素范圍。人想選擇新聞文章的內(nèi)容可能不想選擇頁(yè)腳元素,只是過(guò)去的文章。設(shè)置-ms-user-select:element可以輕松地為用戶(hù)只是選擇文章的內(nèi)容,而不必?fù)?dān)心會(huì)變鼠標(biāo)放置完全正確。
-ms-user-select接受四個(gè)值:
- 文本是可選擇的text— —
- element— — 文本是可選的、 限制為元素的邊界
- none— — 文本不可選
- auto— — 如果元素包含可編輯文本的輸入的元素或 contenteditable 元素,如文本是可選。否則選擇由父節(jié)點(diǎn)的值確定。
auto是的默認(rèn)值為-ms-user-select.
開(kāi)發(fā)人員可以通過(guò)設(shè)置關(guān)閉文本選擇-ms-user-select為none。在 IE,當(dāng)文本設(shè)置為-ms-user-select:none,用戶(hù)將無(wú)法啟動(dòng)所選文本的那塊內(nèi)。但是,如果用戶(hù)開(kāi)始選擇在頁(yè)的不同區(qū)域中的文本,選擇將持續(xù)至任何頁(yè)面包括地區(qū)的區(qū)域位置-ms-user-select為none。在 Firefox,如果開(kāi)發(fā)人員設(shè)置–moz-user-select:none然后選擇在這一領(lǐng)域無(wú)法啟動(dòng),并且也不能包含在任何其他選擇。在 Webkit,設(shè)置–webkit-user-select:none會(huì)使它顯示,如果文本不是包含在所選內(nèi)容,但是如果您復(fù)制并粘貼內(nèi)容,您將看到內(nèi)容包括在選定內(nèi)容中。
user-select了原先建議在用戶(hù)界面的 CSS3模塊 ;此模塊以來(lái)已取代了CSS3 基本用戶(hù)界面模塊,但它并不定義該屬性。Mozilla和Webkit支持自己的此屬性的前綴的版本。然而,如上所述,有了實(shí)現(xiàn)的一些差異。
玩IE 試駕站點(diǎn)上的示例,讓我們知道你的想法。
— — 沙龍紐曼,程序管理器、 Ie 瀏覽器
轉(zhuǎn)載于:https://www.cnblogs.com/shihao/archive/2012/02/11/2346370.html
總結(jié)
以上是生活随笔為你收集整理的使用 CSS 用户选择控制选择的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 总结web压力测试工具
- 下一篇: CSS命名规范(建议版)(转)