JS魔法堂:エレメントが選択されないようにする
3362 ワード
一、前言
IE 5である.5~9 polyfill HTML 5の新機能placeholderでは要素が選択されないようにする必要があるため、ネットや本で関連資料を調べ、後で調べるために記録する.
二、IE 10+実現方式——CSS 3
user-select: auto; => ユーザーは要素の内容を選択できます.
user-select: none; => ユーザーが選択できない要素の内容
user-select: text; => ユーザーはエレメント内のテキストを選択できます
現在、このuser-selectはChrome 6+、Firefox、IE 10+、Opera 15+、Safari 3.1+に対応しています.
三、IE 5.5~9の実装——unselectableプロパティ
unselectableプロパティには継承性がないため、すべてのサブエレメントを巡回し、各サブエレメントにこのプロパティを追加する必要があります.
四、参考
『JavaScriptフレームワーク設計』-9.3.2 user-select
http://www.html-js.com/article/The-Laispace-block-element-is-selected-and-clear-the-check-method
IE 5である.5~9 polyfill HTML 5の新機能placeholderでは要素が選択されないようにする必要があるため、ネットや本で関連資料を調べ、後で調べるために記録する.
二、IE 10+実現方式——CSS 3
.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+に対応しています.
三、IE 5.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');
}
}
};
四、参考
『JavaScriptフレームワーク設計』-9.3.2 user-select
http://www.html-js.com/article/The-Laispace-block-element-is-selected-and-clear-the-check-method