jQuery плагин для запрета выделения текста

07.08.2017

jQuery плагин который позволяет запретить выделение текста в определенных блоках

test.html (Download)

 <!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="https://code.jquery.com/jquery-1.4.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.disable.text.select.js"></script>
<script type="text/javascript">

jQuery.noConflict();

jQuery(document).ready(function($){

	$('.noSelect').disableTextSelect();

	var unlock1 = $("body").append( '<div id="unlock1"></div>');
	$("#unlock1").css({"position" : "fixed", "top": 0, "left" : "0", "width" : "10px", "height" : "10px" }).click(function(){
		$('.noSelect').enableTextSelect();
 	});

});
</script>

<div class="noSelect">
    Text
</div>

</body>
</html>

В скрипте бонусом идет "выключатель" - создающий прозрачную область в 10 пикселей в верхнем левом углу экрана, при нажатии на нее текст можно будет выделять.

jquery.disable.text.select.js (Download)

 /**
 * .disableTextSelect - Disable Text Select Plugin
 *
 * Version: 1.1
 * Updated: 2007-11-28
 *
 * Used to stop users from selecting text
 *
 * Copyright (c) 2007 James Dempster (letssurf@gmail.com, http://www.jdempster.com/category/jquery/disabletextselect/)
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 **/

/**
 * Requirements:
 * - jQuery (John Resig, http://www.jquery.com/)
 **/
(function($) {
    if ($.browser.mozilla) {
        $.fn.disableTextSelect = function() {
            return this.each(function() {
                $(this).css({
                    'MozUserSelect' : 'none'
                });
            });
        };
        $.fn.enableTextSelect = function() {
            return this.each(function() {
                $(this).css({
                    'MozUserSelect' : ''
                });
            });
        };
    } else if ($.browser.msie) {
        $.fn.disableTextSelect = function() {
            return this.each(function() {
                $(this).bind('selectstart.disableTextSelect', function() {
                    return false;
                });
            });
        };
        $.fn.enableTextSelect = function() {
            return this.each(function() {
                $(this).unbind('selectstart.disableTextSelect');
            });
        };
    } else {
        $.fn.disableTextSelect = function() {
            return this.each(function() {
                $(this).bind('mousedown.disableTextSelect', function() {
                    return false;
                });
            });
        };
        $.fn.enableTextSelect = function() {
            return this.each(function() {
                $(this).unbind('mousedown.disableTextSelect');
            });
        };
    }
})(jQuery);

Категории: JavaScript, HTML
Пометки: jquery.disable.text.select
Яндекс.Метрика