0%

Hey! Do you have any query related to front end?

Sign in Sign up

Copy text to clipboardBack

Copy text from browser to clipboard.

Button event which perform copy option.


Function copyText(this) has a parameter this, this is just to target the button DOM.

Now copyText() function

function copyText(elem){
	var prevElem = elem.previousElementSibling;

	if(prevElem.tagName == "TEXTAREA" && hasClass(prevElem, "selectableCon") == false){

		//Select content from textarea by select() function
		 prevElem.select();

	}else{
		//Set DOM to contentEditable = true otherwise.
		prevElem.contentEditable = true;

		//Use execCommand that will execute selection command
		document.execCommand("selectAll", true, null);

		//Set contentEditable to false otherwise user can edit
		prevElem.contentEditable = false;

	}

	//Copy command called
	copyCommand(prevElem);
}

copyText(elem), has a parameter "elem", this holds the button DOM which has been clicked. Now through this button, function is going to target the element from which text will be copied. Then previousElementSibling targets to the element which is just behind the button DOM which has been clicked. This can be a textarea or div.

TEXTAREA or DIV this has been checked in the if statement, and also has been checked for availability of selectableCon class. This has been checked by hasClass() function, which is at bottom.

Function to check availability of class

function hasClass(element, cls) {
	return ( + element.className + ).indexOf( + cls + ) > -1;
}

It has two parameter element and cls. "element" is for the element on which this function will perform and "cls" is for the class which has to be checked.

Function that selects text in textarea

prevElem.select();

Here "prevElem" is the element which has been targeted in "copyText()" function, and select() selects the text inside selected area, if it is a "TEXTAREA". Otherwise if previous element is a "div", then "prevElem.contentEditable = true;" has been initialized. Otherwise "execCommand()" will not execute itself.

After then, again remove contentEditable attribute by "removeAttribute("contentEditable");" function, So that one can not further edit after selection.

Copy function:

function copyCommand(elem){
	var range = document.createRange();
	range.selectNode(elem);
	window.getSelection().addRange(range);
	document.execCommand("copy");
}

Copy command create the range of selection, selectNode() function targets element from where data has to be selected. Similarly, getSelection() grabs selected content and addRange() defines the selected data.

Finally, document.execCommand("copy"), copy the selected text to clipboard.

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Tab 2 accordion responsive plugin

    Plugin that changes tabs to accordion

    • 284
    • 11
    • 284
    • facebook icon
    • twitter icon
    • google plus
  • Validate email by javascript regex

    Validate email field by regular expression

    • 198
    • 4
    • 198
    • facebook icon
    • twitter icon
    • google plus
  • Css3 image blending like photoshop

    CSS3 blend mode blends two background simultaneously like Photoshop blending.

    • 227
    • 4
    • 227
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password