如何使用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. Windows Phone开发（14）：数据模板

    原文:Windows Phone开发(14):数据模板 数据模板,如果你仅仅听到这个名词,你一定很迷惑,什么来的?用来干什么的?不急,亲,今天,我们一起来探索一下吧. 用白话文说,数据模板就是用来规范 ...

  2. Foursquare 8.0 ：聪明人给互联网公司上的流量转化课

    今年 5 月上线的 Swarm 虽然应用制作精良,但不免让人怀疑是 Foursquare一次失败的互联网公司服务越界和用户忠诚度试水.但非常快这群聪明人让我们发现事情并没有这么简单:他们给互联网公司们 ...

  3. python中使用traceback来追踪异常

    test1.py中,当分母为0的时候,调用系统退出 #!/usr/bin/python import sys def division(a=1, b=1): if b==0: print 'b eq ...

  4. vc++笔记十一

    一.LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 连接器LNK是通过调用cvtres.exe完毕文件向coff格式的转换的,所以出现这样的错误的原因就是cvtres.exe出现了问题 ...

  5. SSH证书登录方式（无password验证登录)

    经常在工作中须要在各个Linux机间进行跳转,每次password的输入成了麻烦,并且也不安全.在实际使用中,在windows下常使用secureCRT工具或teraterm工具进行SSH登录.以及实 ...

  6. 左右PHP自增力、神秘递减操作

    首先看一个面试题: $a = 1; $b = &$a; if ($b == $a++) echo "true"; else echo "false"; ...

  7. BootstrapQ 包Bootstrap tree，dialog等待

    官方网站:http://uikoo9.com/bootstrapQ why 事实上bootstrap已经非常好了,唯一的软肋就是js方面有些薄弱,对照easyui就知道了. 能够非常明显的知道boot ...

  8. effective c++ 条款7 declare virtual destructor for polymophyc base class

    这似乎很明显. 如果base class的destructor不是virtual,当其derived class作为基类使用,析构的时候derived class的数据成员将不会被销毁. 举个例子 我 ...

  9. Shibboleth

    1.Shibboleth是一个针对SSO的开源项目.Shibboleth项目主要应用在校园内Web资源共享,以及校园间的应用系统的用户身份联合认证.

  10. 【转】c++继承:公有、私有、保护

    原文链接:http://www.cnblogs.com/qlwy/archive/2011/08/25/2153584.html 公有继承(public).私有继承(private).保护继承(pro ...