javascriptによるhtmlテキストの実装はオプションではありません
3378 ワード
jsを使用してhtmlのテキストを選択できないようにするにはどうすればいいですか?まず考えられる方法はcssセレクタを用いて実現され,以下のようになる.
しかし、古いブラウザと互換性がないため、jsを使用して実装し、すべてのブラウザと互換性を持つ方法について説明します.
まず思い浮かぶのは、
これでhtmlテキストを完了することはできません.jQueryを使用してJQueryプラグインを拡張することもできます.
または、
はい、これですべてのブラウザと基本的に互換性があります.
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
しかし、古いブラウザと互換性がないため、jsを使用して実装し、すべてのブラウザと互換性を持つ方法について説明します.
まず思い浮かぶのは、
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734</title>
<script>
window.onload = function() {
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
disableSelection(labels[i]);
}
};
function disableSelection(element) {
if (typeof element.onselectstart != 'undefined') {
element.onselectstart = function() { return false; };
} else if (typeof element.style.MozUserSelect != 'undefined') {
element.style.MozUserSelect = 'none';
} else {
element.onmousedown = function() { return false; };
}
}
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
これでhtmlテキストを完了することはできません.jQueryを使用してJQueryプラグインを拡張することもできます.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
$('label').disableSelection();
});
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
または、
(function ($) {
$.fn.disableSelection = function () {
return this.each(function () {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
};
})(jQuery);
$(document).ready(function() {
$('label').disableSelection();
// Or to make everything unselectable
$('*').disableSelection();
});
はい、これですべてのブラウザと基本的に互換性があります.