JS魔法堂：阻止元素被選中 - fsjohnhuang－IT工程師數位筆記本

文章出處

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

在為IE5.5~9polyfill HTML5新特性placeholder時需要阻止元素被選中，因此在網上、書上查閱相關資料，記錄在此以便日后查閱。

二、IE10+實現方式──CSS3　　　　　　　　　　　　　　　　　　　　

.unselect {
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -khtml-user-select: none;  
    -ms-user-select: none;    

    /* 以下兩個屬性目前并未支持，寫在這里為了減少風險 */
    -o-user-select: none;
    user-select: none;  
}

user-select: auto; => 用戶可以選中元素中的內容

user-select: none; => 用戶不可選中元素中的內容

user-select: text; => 用戶可以選中元素中的文字

目前這個 user-select 兼容 Chrome 6+、Firefox、IE 10+、Opera 15+、Safari 3.1+。

三、IE5.5~9的實現──unselectable屬性　　　　　　　　　　　　　　　　

<span unselectable="on"></span>

由于unselectable屬性不具有繼承性，所以要遍歷所有子元素并為各子元素添加該屬性才有效。

// 將元素及其后代元素均設置為不可選擇
var unselectable = function(root){
  root.setAttribute('unselectable', 'on');
  var descendant = root.getElementsByTagName("*");
  var rTagName = /input|iframe|textarea|select/i;
  for (var i = 0, el; el = descendant[i++];){
    if (!rTagName.test(el.tagName)){
      el.setAttribute('unselectable', 'on');
    }  
  }
};