如何使用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. 使用JustDecompile修改程序集

    原文:使用JustDecompile修改程序集        JustDecompile是Telerik公司推出一个免费的.net反编译工具,支持插件,与Visual Studio 2010,2012 ...

  2. 【Web优化】Yslow优化法则（四）启用Gzip压缩

    Yslow的第4个经验法则指出:启用gzip压缩功能,能够降低HTTP传输的数据和时间,从而降低client请求的响应时间. 本篇是Yslow法则的第四个,主要包含三个方面的内容: 1.      什 ...

  3. 二十7天 春雨滋润着无形 —Spring依赖注入

    6月11日,明确."夏条绿已密,朱萼缀明鲜.炎炎日正午,灼灼火俱燃." IT人习惯把详细的事物加工成的形状一致的类.正是这种一致,加上合适的规范.才干彰显对象筋道的牙感和bean清 ...

  4. 小米2S Mk6.0.1 [只能做测试体验，不能使用]

    上几张高清图片.. 说明: 此版本只能做测试体验,不能做实际使用. 开发者: laser杨万荣 感谢: 秋叶随风ivan, m1cha 及 MoKee Open Source的各位开发者 下载地址:链 ...

  5. WindowsPhone 在 根据公历 获取月球日期数据

    WindowsPhone 在 根据公历 获取月球日期数据 WindowsPhone 在 它们的定义 类,根据公历 获取月球日期数据 using System; using System.Collect ...

  6. Java乔晓松-android中上传图片到服务器Tomcat(Struts2)

    在做android开发的时候,有时你会用到图片的上传功能,在我的android项目中,我是选中图片,点击上传多张图片 android客户端上传图片部分的代码如下: package com.exampl ...

  7. 苹果Swift编程语言新手教程【中文版】

    文件夹 1 简单介绍 2 Swift入门 3 简单值 4 控制流 5 函数与闭包 6 对象与类 7 枚举与结构 1 简单介绍 Swift是供iOS和OS X应用编程的新编程语言,基于C和Objecti ...

  8. POJ 1798 Truck History

    Description Advanced Cargo Movement, Ltd. uses trucks of different types. Some trucks are used for v ...

  9. Lua 脚本语法说明（转）

    Lua脚本语法说明(增加lua5.1部份特性) Lua 的语法比较简单,学习起来也比较省力,但功能却并不弱. 所以,我只简单的归纳一下Lua的一些语法规则,使用起来方便好查就可以了.估计看完了,就懂得 ...

  10. 在Apk应用程序内，查找某个Activity。

    转载请注明出处:http://blog.csdn.net/droyon/article/details/39933677 Intent intent = new Intent(Intent.ACTIO ...