使用 CSS 用戶選擇控制選擇

IE10 平臺預覽 4 包括一個新的 CSS 屬性的支持-ms-user-select,這使得 Web 開發者控制完全可以選擇什么的文本,在其網站上更容易。如果你是看我一整天都在我的工作站,您會注意到我讀計算機上時,我選擇的文本。我不是只有一個人讀起來像這 ;選擇文本在互聯網上是重要在很多其他方案。

考慮一個典型的新聞網站。大多數網頁將包括新聞文章,其中,用戶需要能夠選擇,因為他們讀通過選擇文本或因為他們想要共享內容的內容。此外在新聞網頁上有一些菜單和鏈接到網站的其他部分。用戶可能不需要選擇這些項目。使用-ms-user-select,Web 開發人員可以指定所選文本是新聞文章中允許使用,但不是允許在菜單中。

IE 試駕站點包括執行此操作的示例。

Screen shot of the user-select Test Drive demo showing one possible markup pattern of -ms-user-select.

設置-ms-user-select:none上整個頁面,然后設置 -ms-user-select:element元素包含在博客上后允許只被選中的博客文章的內容。-ms-user-select:element是一個新的屬性,首先引入的 IE,我們認為可以在很多情況下有用。設置-ms-user-select:element意味著用戶可以選擇該元素的文本,但是,所選內容將受到限制的元素范圍。人想選擇新聞文章的內容可能不想選擇頁腳元素,只是過去的文章。設置-ms-user-select:element可以輕松地為用戶只是選擇文章的內容,而不必擔心會變鼠標放置完全正確。

-ms-user-select接受四個值:

  • 文本是可選擇的text— —
  • element— — 文本是可選的、 限制為元素的邊界
  • none— — 文本不可選
  • auto— — 如果元素包含可編輯文本的輸入的元素或 contenteditable 元素,如文本是可選。否則選擇由父節點的值確定。

auto是的默認值為-ms-user-select.

開發人員可以通過設置關閉文本選擇-ms-user-selectnone。在 IE,當文本設置為-ms-user-select:none,用戶將無法啟動所選文本的那塊內。但是,如果用戶開始選擇在頁的不同區域中的文本,選擇將持續至任何頁面包括地區的區域位置-ms-user-selectnone。在 Firefox,如果開發人員設置–moz-user-select:none然后選擇在這一領域無法啟動,并且也不能包含在任何其他選擇。在 Webkit,設置–webkit-user-select:none會使它顯示,如果文本不是包含在所選內容,但是如果您復制并粘貼內容,您將看到內容包括在選定內容中。

user-select了原先建議在用戶界面的 CSS3模塊 ;此模塊以來已取代了CSS3 基本用戶界面模塊,但它并不定義該屬性。Mozilla和Webkit支持自己的此屬性的前綴的版本。然而,如上所述,有了實現的一些差異。

玩IE 試駕站點上的示例,讓我們知道你的想法。

— — 沙龍紐曼,程序管理器、 Ie 瀏覽器

轉載于:https://www.cnblogs.com/shihao/archive/2012/02/11/2346370.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275013.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275013.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275013.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

一個在校的普通前端小姐姐的2021

大家好,我是若川。這是我的源碼共讀群里一個大三的前端小姐姐(小曹同學)的年度總結。她寫了5篇源碼筆記。同時做了很多項目,獲得了很多獎。而且策劃和建立了學校工作室的前端訓練營,40人報名參加。總之就是現在的大學生…

按鈕 交互_SwiftUI中的微交互—菜單按鈕動畫

按鈕 交互Microinteractions have become increasingly important in a world with a dizzying number of digital platforms and an ocean of content. While microinteractions used to be considered an interesting resource in the early days of digital design, in toda…

JavaScript邏輯運算符的使用技巧

前言 !, &&, || 三個運算符是JavaScript中重要的邏輯運算符,本文將介紹這三個運算符在JavaScript實際編程中的有趣使用技巧。 取反運算符(!) 如果對一個值連續做兩次取反運算,等于將其轉為對應的布爾值,與Bool…

如何接觸到最新的前端動態、最前沿的前端技術

眾所周知,關注公眾號可以了解學習掌握技術方向,學習優質好文,落實到自己項目中。還可以結交圈內好友,讓自己融入到積極上進的技術氛圍,促進自己的技術提升。話不多說,推薦這些優質前端公眾號前端有道社區活…

選擇控件— UI組件系列

重點 (Top highlight)The word “toggle” is a reference to a switch with a short handle that alternates between two states each time it is activated. You encounter it every time you “switch” on the lights.單詞“ toggle”是指帶有短手柄的開關,該開…

linux -- Linux diff與patch的深入分析

diff的輸出格式分為傳統格式和統一格式 1)diff的傳統格式輸出. ############################################ cat before.txt 輸出: This is a line to be deleted This is a line that will be changed This is a line that will be unchanged cat after.txt 輸出: This is …

shell命令之---sed

1. sed編輯器基礎 1.1 替換標記 命令格式:s/pattern/replacement/flags $ cat data4.txt    This is a test of the test script.    This is the second test of the test script.    有4種可用的替換標記: 數字,表明新文本將替…

SEE Conf: Umi 4 設計思路文字稿

大家好,我是若川。持續組織了5個月源碼共讀活動,感興趣的可以點此加我微信 ruochuan12 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。復制此鏈接 https:…

用戶體驗改善案例_改善用戶體驗研究的5種習慣

用戶體驗改善案例There’s plenty of misunderstanding around user research, whether it’s the concept of validation or one-off anecdotes being thrown around as concrete evidence for a product decision.用戶研究存在很多誤解,無論是驗證的概念還是一次性…

一場賽跑引起的并發知識

享學特邀作者:老顧前言我們小伙伴們是不是經常需要測試代碼的性能?小伙伴們是不是就會想到jmeter進行壓力測試一下,模擬N個用戶同時執行下,看看響應的時間多少。今天老顧就用一個經典的比賽案例,來嘗試自行編寫個比賽業…

oracle中使用子查詢為何取到大于自然數1 rownum 淺度解析

Oracle 沒有提供TOP N 語句,若希望按特定條件查詢前N 條記錄,可以使用偽列ROWNUM。 ROWNUM 是對結果集加的一個偽列,即先查到結果集之后再加上去的一個列(注意:先要 有結果集)。 rownum 的值是oracle 順序分配的從查詢返回的行的編…

巴克萊對沖_“巴克萊的財政預算案”:使金錢管理對心理健康有效—用戶體驗案例研究

巴克萊對沖Disclaimer: all official Barclays assets used for this project are purely for educational/project purposes only and do not reflect the intentions of Barclays or any of its affiliates.免責聲明:用于此項目的所有官方巴克萊資產純粹是出于教育…

6 個對所有 Web 開發者都有用的 GitHub 倉庫

作者:Mehdi Aoussiad原文:https://javascript.plainenglish.io/6-useful-github-repositories-for-all-web-developers-44f26912fd66大家好,我是若川。持續組織了5個月源碼共讀活動,感興趣的可以點此加我微信 ruochuan12 參與&…

快速刪除數據庫中所有表中的數據

今天又學到一招,可以快速刪除數據庫中所有的用戶表中的數據。我是個菜鳥,望各位大神多多指教 select truncate table Name ; from sysobjects where xtypeU order by name asc; 該條語句執行之后會將數據庫中所有的表都查詢出來,復制出來之…

openfiler的iSCSI配置(二)

為什么80%的碼農都做不了架構師?>>> 一.openfiler iSCSI配置 1.啟動iSCSI target server服務。在Services列表下。 2.設置訪問列表。在System---Network Access Configuration下設置。 3.創建卷設備 二.ISCSI客戶端配置 1.安裝open-iscsi # apt-get ins…

送你一份用Electron開發桌面應用的避坑指南【送3本書,含犀牛書】

大家好,我是若川。持續組織了5個月源碼共讀活動,感興趣的可以點此加我微信 ruochuan12 參與,新年第一次送3本書。抽獎規則見文末。如今,Electron 領域發生了重大的變革,Electron 版本更新換代極快,難以計數…

時間續

mois : janvier fvrier mars avril mai juin juillet aot septembre octobre novembre dcembre semaine : lundi mardi mercredi jeudi vendredi samedi dimanche 轉載于:https://www.cnblogs.com/lavieenrose/archive/2012/02/18/2357597.html

nginx修改upstream不重啟的方法(ngx_http_dyups_module模塊)

為什么80%的碼農都做不了架構師?>>> nginx很強大,第三方模塊也不少,淘寶在nginx上很活躍,特別是章亦春,他參與的模塊至少10, 好了今天主角不是他,是一款動態配置upstream的模塊,這個…

c# 設計原則需要學習嗎_向最好的學習:產品設計原則

c# 設計原則需要學習嗎重點 (Top highlight)In my job as Design Team Lead at SimpleSite, I’ve recently been part of creating a set of Product Design Principles. In this process, I spent a lot of time studying the theory, learning about best practices, and ge…

初學Java-接口

在Java語言中,接口有兩種意思: 一是指概念性的接口,即指系統對外提供的所有服務。類的所有能被外部使用者訪問的方法構成了類的接口 二是指用interface關鍵字定義的實實在在的接口,也稱為接口類型。它用于明確的描述系統對外提供的…