JS Magic Hall: Block element is selected

First, preface

In order to Ie5.5~9polyfill HTML5 new features placeholder need to prevent the selection of elements, so on the Internet, books to check the relevant information, recorded here for later review.

Second, ie10+ realization Way ──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 can select the contents of the element

User-select:none; = = User cannot select content in an element

User-select:text; = user can select text in an element

Currently this user-select is compatible with Chrome 6+, Firefox, IE + +, Opera 15+, Safari 3.1+.

Third, the realization of ie5.5~9 ──unselectable property

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

Because the Unselectable property is not inherited, it is valid to traverse all child elements and add the property for each child element.

//set the element and its descendant elements to be not selectablevarunselectable =function (root) {Root.setattribute ('unselectable',' on'); vardescendant = Root.getelementsbytagname ("*"); varRtagname =/input|iframe|textarea|Select/i;  for(vari =0, El; El = descendant[i++];){    if(!rtagname.test (El.tagname)) {El.setattribute ('unselectable',' on'); }    }};

Iv. references

"JavaScript Framework Design" ──9.3.2 User-select

Http://www.html-js.com/article/The-Laispace-block-element-is-selected-and-clear-the-check-method

JS Magic Hall: Block element is selected