使用javascript实现html文本不可选

来源:互联网 发布:php安装sqlsrv扩展 编辑:程序博客网 时间:2024/06/10 21:23
如何使用js让html中的文本不可选呢?首先想到的方法是使用css选择器来实现,如下:
  1. -webkit-touch-callout: none;
  2. -webkit-user-select: none;
  3. -khtml-user-select: none;
  4. -moz-user-select: none;
  5. -ms-user-select: none;
  6. user-select: none;
复制代码
但是这样并不能兼容旧的浏览器,所以下本文将讨论如何使用js来实现,并兼容所有浏览器。
首先想到的是:
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <title>SO question 2310734</title>
  5.         <script>
  6.             window.onload = function() {
  7.                 var labels = document.getElementsByTagName('label');
  8.                 for (var i = 0; i < labels.length; i++) {
  9.                     disableSelection(labels[i]);
  10.                 }
  11.             };
  12.             function disableSelection(element) {
  13.                 if (typeof element.onselectstart != 'undefined') {
  14.                     element.onselectstart = function() { return false; };
  15.                 } else if (typeof element.style.MozUserSelect != 'undefined') {
  16.                     element.style.MozUserSelect = 'none';
  17.                 } else {
  18.                     element.onmousedown = function() { return false; };
  19.                 }
  20.             }
  21.         </script>
  22.     </head>
  23.     <body>
  24.         <label>Try to select this</label>
  25.     </body>
  26. </html>
复制代码
这样就可以完成html文本不可选了,如果你在使用jQuery也可以扩展JQuery插件的方式来实现:
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <title>SO question 2310734 with jQuery</title>
  5.         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  6.         <script>
  7.             $.fn.extend({ 
  8.                 disableSelection: function() { 
  9.                     this.each(function() { 
  10.                         if (typeof this.onselectstart != 'undefined') {
  11.                             this.onselectstart = function() { return false; };
  12.                         } else if (typeof this.style.MozUserSelect != 'undefined') {
  13.                             this.style.MozUserSelect = 'none';
  14.                         } else {
  15.                             this.onmousedown = function() { return false; };
  16.                         }
  17.                     }); 
  18.                 } 
  19.             });

  20.             $(document).ready(function() {
  21.                 $('label').disableSelection();            
  22.             });
  23.         </script>
  24.     </head>
  25.     <body>
  26.         <label>Try to select this</label>
  27.     </body>
  28. </html>
复制代码
或者:
  1. (function ($) {
  2. $.fn.disableSelection = function () {
  3.     return this.each(function () {
  4.         if (typeof this.onselectstart != 'undefined') {
  5.             this.onselectstart = function() { return false; };
  6.         } else if (typeof this.style.MozUserSelect != 'undefined') {
  7.             this.style.MozUserSelect = 'none';
  8.         } else {
  9.             this.onmousedown = function() { return false; };
  10.         }
  11.     });
  12. };
  13. })(jQuery);

  14. $(document).ready(function() {
  15.     $('label').disableSelection();

  16.     // Or to make everything unselectable
  17.     $('*').disableSelection();
  18. });
复制代码
好的,这样就可以基本上兼容所有的浏览器了。
0 0
原创粉丝点击