如何使用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>

这样就能够完毕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();

});

行，这可以与所有的浏览器基本相容。

版权声明：本文博客原创文章。博客，未经同意，不得转载。

使用javascript实现html文字不可选的更多相关文章

  1. Javascript之模拟文字高亮

    在我们平时浏览网页的时候,我们常常会用到Ctrl+F(搜索)功能,被搜索到的文字就是高亮显示.那么,如何在Javascript中模拟文字高亮显示这一功能呢? 以下为笔者写的样例代码: <!DOC ...

  2. HTML5 JavaScript实现图片文字识别与提取

    8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生, ...

  3. JavaScript自适应调整文字大小

    JavaScript自适应调整文字大小 今天有个任务,发现页面上的数字由于太长而与其他数字重叠了.这个数字还不能像文字那样只显示一部分,必须全部显示.想了一些办法都不行,最后把超过1000变成1K,大 ...

  4. Javascript中对文字编码的三个函数

    JavaScript中对文字编码主要有3个函数 escape,encodeURI, encodeURIComponent 相应3个解码函数 unescape, decodeURI, decodeURI ...

  5. javaScript实现选中文字提示新浪微博分享的效果

    <!DOCTYPE html> <html xmlns:wb="http://open.weibo.com/wb"> <head> <me ...

  6. 借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取

    写在前面 8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技 ...

  7. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

  8. javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示

    产品提了一个小需求,希望一行能展示用户输入的所有文字,因为最多限制为25字符,但是如果夹杂英文/韩文/日文等,即使字符数是一样的,但是展示的长度不一样,则有些title标题会被截断. 效果如图 前提是 ...

  9. Javascript技巧实例精选(2)—文字水平方向上动态漂移

    >>点击这里下载html源文件代码<< 采用Javascript实现,文字水平方向上动态漂移 这是截图 这是相应的Javascript代码 <marquee behavi ...

随机推荐

  1. cocos2d-x 3.0游戏实例学习笔记 《跑酷》第一步--- 开始界面

    说明:这里是平局:晓风残月前辈的博客.他是将泰然网的跑酷教程.用cocos2d-x 2.X 版本号重写的,眼下我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 ...

  2. Android学习笔记四十Preference使用

    Preference直译为偏好,博友建议翻译为首选项.一些配置数据,一些我们上次点击选择的内容,我们希望在下次应用调起的时候依旧有效,无须用户再一次进行配置或选择.Android提供preferenc ...

  3. accept功能

    accept()功能 系统调用 accept() 这将是一个有点陌生的地方! 你可以想象发生 这种事情:这是非常远离你通过倾听 (listen()) 的port连接 (connect()) 你的机器. ...

  4. 发布Ubuntu/Linux系统cache，增加可用内存空间

    桌面Ubuntu总内存4G,但free只有内存有100M 重视top命令检查看到真正的能力free内存.以下是真正的内存使用情况的看法有一个命令. watch -n 1 cat /proc/memin ...

  5. sails不是内部或外部命令的解决方案

    1 安装好node 2 安装sails 打开cmd窗口,用命令 npm -g install sails 安装sails 安装完成后,用命令  sails new testProject 创建项目 会 ...

  6. 乐在其中设计模式(C#) - 组合模式(Composite Pattern)

    原文:乐在其中设计模式(C#) - 组合模式(Composite Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 组合模式(Composite Pattern) 作者:weba ...

  7. POJ3623:Best Cow Line, Gold(后缀数组)

    Description FJ is about to take his N (1 ≤ N ≤ 30,000) cows to the annual"Farmer of the Year&qu ...

  8. 【rman，1】经典案例增量备份

    一.备份策略: 1.星期天晚上      -level 0 backup performed(全备份) 2.星期一晚上      -level 2 backup performed 3.星期二晚上   ...

  9. 白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连续7-电话问卷调查

    [例7-3  文本编辑框创建一个简单的调查问卷] 01     <!DOCTYPEhtml> 02     <html> 03     <head> 04     ...

  10. vb.net它SqlHelper制备及应用

    上次文章中说到.对于一个项目来说.SqlHelper是一个非常重要的类. 在正在构造的机房收费系统中.有大量的操作数据库的操作. 现在.把反复的代码所有拿出来,就形成了SqlHelper类.这个Sql ...