如何使用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. CodeForces 52C Circular RMQ（间隔周期段树，间隔更新，间隔总和）

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://codeforces.com/problemset/problem/52/C You are g ...

  2. EXE文件结构和读取方法

    一.EXE文件概念 EXE File英文全名executable file .译作可运行文件,可移植可运行 (PE) 文件格式的文件,它能够载入到内存中.并由操作系统载入程序运行,是可在操作系统存储空 ...

  3. import android.provider.Telephony cannot be resolved

    android.provider.Telephony is hidden. http://androidxref.com/4.0.3_r1/xref/frameworks/base/core/java ...

  4. Google的Guava它Collection升华

    至于Guava这是不是在这里说.一个已被提上一个非常特殊的! 这主要是为了分享Guava对于一些升华处理组.井,不多说了,直接在代码: package com.joyce.guava.bean; /* ...

  5. sql server基本流程语句

  6. （转）FFMPEG解码流程

    http://www.douban.com/note/228831821/ FFMPEG解码流程:     1. 注册所有容器格式和CODEC: av_register_all()     2. 打开 ...

  7. emeditor 配置教程

    1.众多的图形界面配置功能 通过查看EmEditor的安装目录,可以发现,EmEditor有几个配置文件,理论上应该可以通过修改配置文件来达到配置EmEditor的目 的.然而,打开配置文件一看,如果 ...

  8. GLEW_ERROR_NO_GL_VERSION的解决方法

    关于 GLenum err = glewInit(); if (GLEW_OK != err) fprintf(stderr, "error initializaing GLew %s\n& ...

  9. C++它tinyXML使用

    tinyXML一个非常好的操作C++图书馆,文件不大,但方法非常丰富.和apache的Dom4j能够披靡啊! 习惯了使用java类库的我看到这么丰富的c++类库,非常高兴!它使用非常easy.仅仅须要 ...

  10. struts2于validate要使用

    package com.test.action; import com.opensymphony.xwork2.ActionSupport; import com.test.model.User; p ...