国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

禁止用戶選擇的另一種思路（兼容 IE8）

Darkgel / 1647人閱讀

摘要：禁止用戶選擇的另一種方法是在不想被選中的元素上面綁定事件并且返回。另一種思路偽類偽元素先上一個例子。標準當中方法可以用于所有的屬性和元素當中，但是目前還沒有任何一個瀏覽器實現了這個標準。

user-select

前端開發中常常會遇到一種需求，讓某些元素的內容不能被選中，一般的做法會用 user-select: none 來做，由于 user-select 并不是標準的 CSS 屬性，所以使用的時候要加上瀏覽器的前綴。

.disabled-select {
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

來看看 user-select 的在桌面端的兼容性：

目前依然有大部分桌面端網頁需要兼容 IE8 以上的瀏覽器，因此使用 user-select 并不是一個最完美的解決方案。

onselectstart

禁止用戶選擇的另一種方法是在不想被選中的元素上面綁定 onselectstart 事件并且返回 false。這個在實際應用中并不好用，如果用戶在該元素上開始選擇的確可以禁止選中，但只要移出該元素外開始選擇就可以無視 onselectstart 事件。

另一種思路：偽類、偽元素

先上一個例子。

123
.disable-select:after {
  content: "456";
}

由于偽類并不是 DOM 里面的一部分，所以可以發現寫在偽類 content 里面的值不能被選中。

但是一般來說頁面渲染的內容不能直接寫到 CSS 當中，所以這里需要一個強大的 CSS 方法 —— attr。

attr

把上面的例子修改一下（傳送門）

123
.disable-select:after {
  content: attr(data-content);
}

CSS 的 attr 是一個強大的方法，可以直接獲取元素屬性的值直接用在 CSS 當中。CSS3 標準當中 attr 方法可以用于所有的 CSS 屬性和元素當中，但是目前還沒有任何一個瀏覽器實現了這個標準。

但應用于偽類、偽元素（IE8 只支持偽類） content 屬性返回 string 類型的用法是被大部分瀏覽器支持。

不足

雖然使用偽類加上 attr 可以做到兼容性較好的禁止選擇效果，但是這種方法在 IE8 里面依然有一些不同的表現，使用 alt + a 全選等快捷鍵按鈕依然可以選擇偽類里面的內容。

感謝您的閱讀，有不足之處請為我指出。

本文同步于我的個人博客 http://blog.acwong.org/2016/08/23/a-new-tecknology-of-prohibiting-from-selecting-text/

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111487.html

相關文章

  • css相關 - 收藏集 - 掘金

    摘要：在正式前端一些小細節前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現了一下，順便...

    molyzzx 評論0 收藏0

  • Javascript無刷新文件上傳

    摘要：最近工作中遇到上傳文件問題，主要需求是一步點擊上傳，兼容，當時用的控件，這兩天扒了一下源碼，明白了原理拿出來分享一下。組織頁面刷新端代碼使用模塊將文件暫存在目錄下。然后綁定的事件，通過取得中的數據。轉自無刷新文件上傳 最近工作中遇到上傳文件問題，主要需求是一步點擊上傳，兼容ie8+，當時用的dojox/form/uploader控件，這兩天扒了一下源碼，明白了原理拿出來分享一下。 總體...

    longmon 評論0 收藏0

  • 瀏覽器兼容問題

    摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。條件注釋最初于微軟的瀏覽器中出現，并且直至均支持。 一、什么是瀏覽器兼容問題 所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統，都...

    wenshi11019 評論0 收藏0

  • JavaScript 表單腳本——“文本框腳本”的注意要點

    摘要：屬性可以設置文本框的初始值。特性則是用于指定文本框內可以接受的最大字符數。與這個方法對應的事件，在選擇了文本框中的文本時事件觸發。如阻止用戶選擇要調用之前或之后立即將焦點設置到文本框。 在HTML中，有兩種方式來表現文本框： 一種是使用input元素的單行文本，另一種是使用textarea的多行文本框。 使用input方式，必須添加type，設置為text。 size特性，可以指定文...

    kk_miles 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<