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

		//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

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


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();

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

  • Characters limit in textarea

    Limit charecters in textarea without extra space.

    • 278
    • 5
    • 278
    • facebook icon
    • twitter icon
    • google plus
  • Css3 image blending like photoshop

    CSS3 blend mode blends two background simultaneously like Photoshop blending.

    • 274
    • 4
    • 274
    • facebook icon
    • twitter icon
    • google plus
  • Force other page to scroll

    Scroll other page at specific location, when related link has been clicked in current page.

    • 311
    • 5
    • 311
    • 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