Copy Text Using JavaScript Using document.execCommand()

Copy Text Using JavaScript Using document.execCommand()

Here is a Sample Code - Click Here To Copy

    
    function copy(selector,command){
      if(selector) document.querySelector(selector).select();
      if(!command)command = 'copy';
      document.execCommand(command);
    }
    
  

Selector is for the querySelector of your Element like 

You have to copy a Text Under Element with id report so you have to pass #report here.

Run This Function ...

    
 copy('#report')
    
  

Here Second Option is Optional .

Possible Values :- 1. Copy, Cut

Default Value :- Copy.


See Demo Codes Here :- https://replit.com/@SH20RAJ/Tutorials#copy-text-js/index.html

See Demo :- https://tutorials.sh20raj.repl.co/copy-text-js/

Chats During Video Making :- https://simp.ly/p/vPDdmj


Tips :-

- See Example Code Here For Input and Copy Button.

    
    function copy(selector,command){
      if(selector) document.querySelector(selector).select();
      if(!command)command = 'copy';
      document.execCommand(command);
    }
    
  

- Use User Select to Select the inner Text of Div. and Copy() for Copying After Select.


     
      <pre>
    <code id="code1" onclick="copy()" style="user-select: all;">
    function copy(selector,command){
      if(selector) document.querySelector(selector).select();
      if(!command)command = 'copy';
      document.execCommand(command);
    }
    </code>
  </pre>

    
  

Comments

  1. Chats During Video Making...
    Copy Text Using JavaScript Using document.execCommand()

    - [x] Previews - Live Demo
    - [x] Introducing to codes and describing functions

    Links :-
    - [ ] Article Link :- https://codexdindia.blogspot.com/2021/05/copy-text-using-javascript-using.html
    - [ ] Demo Link :- https://replit.com/@SH20RAJ/Tutorials#copy-text-js/index.html

    Paste Things Here -
    - [ ]
    function copy(selector,command){
    if(selector) document.querySelector(selector).select();
    if(!command)command = 'copy';
    document.execCommand(command);
    }
    - [ ] My Website :- https://tutorials.sh20raj.repl.co/My Website :- https://tutorials.sh20raj.repl.co/
    - [ ] fr3f3


    Chats:-
    Let's Start...
    I had Clicked there let's paste

    function copy(selector,command){
    if(selector) document.querySelector(selector).select();
    if(!command)command = 'copy';
    document.execCommand(command);
    }

    It Copied Really...

    By JUst Using 2 or 4 lines of Code...


    It's too Simple...

    we can copy using copy buttons or directly by clicking...
    Let's See the Demo...
    How to do this easy work...

    Article Link will Be in Description :-

    Let's Start Codeing.....

    //Let's create a selector of input tag...
    var txt = document.querySelector('#text');
    function copy(){
    txt.select();//This Function will Select the text under #text...

    //Let's make a function for Copying...
    document.execCommand('copy') //This Function will Execute the copy command on whatever selected on the webpage...


    }
    Let's Test it...


    Ya it's Working ....


    Let's make this Function Reusable ...

    By adding Parameters to it...
    So you not have to create another function for copying other items


    It's not working let's pass a parameter to it...

    It's Copied.......


    Now it's Reusable code....

    //Let's create a selector of input tag...
    // var txt = document.querySelector('#text');
    function copy(selector){
    document.querySelector(selector).select();//This Function will Select the text under #text...

    //Let's make a function for Copying...
    document.execCommand('copy') //This Function will Execute the copy command on whatever selected on the webpage...


    }

    Let's Add a Parameter for Copy or Cut


    Here Cut and Copy Parameters are Working...

    This video is a detailed video so it may be longer...
    I'm describing you a single thing...


    If you not want to do this just copy paste the code that is in article...

    Or new video may come where you can use this js as cdn and run copy/cut on your webpage...



    Now Let's See how to do it with text under div or other tags....

    It's not working because select() property not works on div...
    So we will select the content using css... (or js if you want...)


    This function will select whole text...
    Now we have to run copy function....


    It's copied but now it's not working foe input tag...

    so let's make if .
    It's not working...

    So Now this new Function is applicable for all tags...


    function copy(selector,command){
    if(selector) document.querySelector(selector).select();
    if(!command)command = 'copy';
    document.execCommand(command);
    }


    Thsi is the function Use it...
    I may finish the video in 2 min but I made a longer video
    Just for making the functions understandable to you all.

    Short video using copyme.js is coming soon .......


    Thanks For Watching Till Last...
    /
    /
    /
    /
    /

    /
    /

















    ReplyDelete
  2. Codepen :- https://codepen.io/SH20RAJ/pen/gOmPppm?editors=1010

    ReplyDelete

Post a Comment