首页 > 代码库 > 使用javascript实现html文本不可选
使用javascript实现html文本不可选
如何使用js让html中的文本不可选呢?首先想到的方法是使用css选择器来实现,如下:
-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>
<!doctype html> <html lang="en"> <head> <title>SO question 2310734 with jQuery</title> <script src=http://www.mamicode.com/"http://code.jquery.com/jquery-latest.min.js"></script>>
或者:(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(); });
好的,这样就可以基本上兼容所有的浏览器了。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。