2012-03-08 133 views
5

我的頁面的一部分需要雙擊,這具有不良影響,有時用戶無意中突出顯示頁面上的某些文本。停止HTML文本被突出顯示

這真的只是亂糟糟的,但有沒有一種簡單的方法來阻止這種情況發生,除了通過使用圖像而不是文本?

謝謝

回答

11

這裏是CSS禁用文本選擇。 How to disable text selection highlighting using CSS?

-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
-o-user-select: none; 
user-select: none; 
+1

對我來說夠好!謝謝:) – CompanyDroneFromSector7G 2012-03-08 15:41:18

+2

爲什麼添加-webkit-touch-callout:none;? – 2016-05-03 11:13:34

2

由於@arunes建議,你可以用CSS大多數瀏覽器做到這一點。不過,我讀過,這不適用於IE 6-8(至少)。因此,對於這一點,你可能需要的東西,如:

document.getElementById("divDoubleClick").onselectstart = function() { return false; }; 
2

這對我的作品

的建議把CSS樣式

body, div 
{ 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: -moz-none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

還添加這些允許的表單字段中選擇

input, textarea, .userselecton 
{ 
    -webkit-touch-callout: text; 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
} 

請注意,-moz-none所需或重新啓用輸入不起作用。

IE瀏覽器我添加

<script type="text/javascript"> 
    window.addEvent("domready", function() 
    { 
     document.addEvent("selectstart", function(e) 
     { 
      if ((e.target.tagName == "INPUT") || 
      (e.target.tagName == "TEXTAREA") || 
       (e.target.hasClass("userselecton"))) 
      { 
       return true; 
      } 
      return false; 
     }); 
    }); 
</script> 

這不僅防止背景的文本選擇,但允許在inputfields選擇和和元素,你穿上userseleton類。

+0

感謝有用的信息! – CompanyDroneFromSector7G 2016-03-07 09:26:36