如何使用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. Activity详细解释（生命周期、以各种方式启动Activity、状态保存，等完全退出）

    一.什么是Activity? 简单的说:Activity或者悬浮于其它窗体上的交互界面. 在一个应用程序中通常由多个Activity构成.都会在Manifest.xml中指定一个主的Activity, ...

  2. hdu 4464 水

    http://acm.hdu.edu.cn/showproblem.php?pid=4464 现场赛总会有水题,这就是最水的一道,预计也就是能当高校的上机题,保研用,呵呵~~~ #include &l ...

  3. hdu 4891---水的问题 但WA非常多

    这个问题是在一个坑----即使在使用long  long 这将是超出范围 自己显得很长的时间去阅读很多次的称号仍然没想到 当时的想法是要记住----无论如何,我用long long 已经最大范围.当然 ...

  4. 编译Nginx支持Tcp_warppers

    Tcp wrappers : Transmission Control Protocol (TCP) Wrappers 为由 inetd 生成的服务提供了增强的安全性.TCP Wrappers 是一种 ...

  5. 在SQLAlter在现场一定的价值

    update AA set aa = replace(aa,'1234','规范') where aa like '%1234%'

  6. 人们的Live Meeting系列 （floyd）

    人活着系列之开会 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 人活着假设是为了事业.从打工的到老板的,个个都在拼搏,奋斗了多年最终有了非凡成就.有了一 ...

  7. Word001

    C# Word 类库 2009-08-06 22:10 13470人阅读 评论(10) 收藏 举报 c#objectstring文档microsoftexcel using System;using ...

  8. Java 序列化Serializable详解（附详细例子）

    Java 序列化Serializable详解(附详细例子) 1.什么是序列化和反序列化 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization ...

  9. [原创] linux 下上传 datapoint数据到yeelink 【golang版本】

    package main /* Create by sndnvaps<sndnvaps@gmail.com> * date : 2015-04-05 * upload datapoint ...

  10. Mono for Android开发调研笔记

    安装完Mono for Android(简称:MonoDroid)之后,可以用MonoDevelop或Visual Studio来开发Mono for Android应用程序:目前只能在模拟器上调试和 ...