成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Darkgel / 1650人閱讀

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

user-select

前端開發(fā)中常常會(huì)遇到一種需求，讓某些元素的內(nèi)容不能被選中，一般的做法會(huì)用 user-select: none 來做，由于 user-select 并不是標(biāo)準(zhǔn)的 CSS 屬性，所以使用的時(shí)候要加上瀏覽器的前綴。

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

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

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

onselectstart

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

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

先上一個(gè)例子。

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

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

但是一般來說頁(yè)面渲染的內(nèi)容不能直接寫到 CSS 當(dāng)中，所以這里需要一個(gè)強(qiáng)大的 CSS 方法 —— attr。

attr

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

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

CSS 的 attr 是一個(gè)強(qiáng)大的方法，可以直接獲取元素屬性的值直接用在 CSS 當(dāng)中。CSS3 標(biāo)準(zhǔn)當(dāng)中 attr 方法可以用于所有的 CSS 屬性和元素當(dāng)中，但是目前還沒有任何一個(gè)瀏覽器實(shí)現(xiàn)了這個(gè)標(biāo)準(zhǔn)。

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

不足

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

感謝您的閱讀，有不足之處請(qǐng)為我指出。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111487.html

相關(guān)文章

  • css相關(guān) - 收藏集 - 掘金

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

    molyzzx 評(píng)論0 收藏0

  • Javascript無刷新文件上傳

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

    longmon 評(píng)論0 收藏0

  • 瀏覽器兼容問題

    摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。條件注釋最初于微軟的瀏覽器中出現(xiàn)，并且直至均支持。 一、什么是瀏覽器兼容問題 所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都...

    wenshi11019 評(píng)論0 收藏0

  • JavaScript 表單腳本——“文本框腳本”的注意要點(diǎn)

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

    kk_miles 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<