W3 Lessons

Thursday, September 22, 2011

Disable Enable Deselect Text Selection using JavaScript jQuery

As our subscriber request, how to Disable Enable Deselect Text Selection using JavaScript jQuery let us see how to work with prevent / disable text selection in web page using JavaScript / jQuery,

Here is the solution to prevent or disable enable text selection based on our requirement.

We can do the following:with this script:

Disable Text selection on your web page
Enable Text Selection on particular Area
Deselect Selected Text if you are in protected Area.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Disable /Prevent Text Selection jQuery-JavaScript</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Begin:
// Jquery Function to Disable Text Selection
(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)
// EO Jquery Function

// Usage
// Load Jquery min .js ignore if already done so
// $("element to disable text").disableTextSelect();
// $("element to Enable text").enableTextSelect();
//

jQuery(function($) {
$("body").disableTextSelect();

$("#code").mouseover(function(){
 $("body").enableTextSelect();
});

$("#code").mouseout(function(){  

// Code for Deselect Text When Mouseout the Code Area
if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}
       
 $("body").disableTextSelect();
});
});
</script>

<style type="text/css">
<!--
body {
 margin-left: 10px;
 margin-top: 10px;
}

#code
{
 padding:20px;
 border:2px dashed #CCC;
 font-family:"Courier New", Courier, monospace;
 font-size:15px;
 background-color:#EEE;
}
-->
</style>
</head>

<body>
<h2>Disable /Prevent Text Selection jQuery-JavaScript</h2>
<p>Below this Code Area User can Allow to Select a Text in other Area text selection was disabled</p>
<p id="code">
$(".elementsToDisableSelectFor").disableTextSelect();</p>
<p>When you are leaving above code box selection was deselected! If selected !</p>
</body>
</html>

Live Demo

Monday, September 19, 2011

Copy Text to Clipboard Jquery JavaScript

Working with Clipboard in web page is have some security restriction on browser such Firefox and internet explorer. Here is the solution to copy text to clipboard with jQuery without any browser restriction.

zClip the effective clipboard handling jQuery with Flash Support we can make copy any region of text range with custom style and animated interface let us create it one example.

<h2>Copy Text to Clipboard Jquery JavaScript</h2>

<div style="padding:10px; border:1px dashed #ccc;">
<p id="description">
Welcome to ZeroClipBoard
</p>
<a id="copy-description">Copy above Text to Clipboard</a>

</div>
<br />

<textarea id="dynamic" style="padding:10px; border:1px solid #333; width:300px; height:100px;"></textarea>
<br /><br />
<a style="padding:4px; border:1px solid #333;" id="copy-dynamic">Copy</a><span id="msg" style="color:#090;"></span>

<script type="text/javascript">

$(document).ready(function(){

    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text(),
  afterCopy:function(){
            $('a#copy-description').text('Copied').fadeOut('slow');
        }
    });


    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('textarea#dynamic').val();},
        beforeCopy:function(){
            $('textarea#dynamic').css('background','green');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('textarea#dynamic').css('background','white');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }  
    });


});


</script>

id for the source element must call with the copy- instruction before initiate a clipboard handling with zClip

Live Demo

Download Script