JavaScript - Copy Text to Clipboard Tutorial

Поделиться
HTML-код
  • Опубликовано: 2 янв 2025

Комментарии •

  • @naziz1353
    @naziz1353 3 года назад +1

    Thankyou brother I love you I can't express my happiness in this small comment section, you solved my problem in 7 min I searched here and there for total 1 hour, you are amazing bro you are amazing

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      I really appreciate your comment! Thank you for your kind words and I'm glad it helped you :)

  • @drf-24
    @drf-24 6 месяцев назад

    Excellent and straight to the point. Thank you.

  • @aboobala5248
    @aboobala5248 4 года назад +2

    Most tutorial available show how to copy text from an input field only. Yours is great because text can be copied from p.
    Great tutorial. Well done!

    • @NsquaredCoding
      @NsquaredCoding  4 года назад +1

      Thank you so much! That's exactly why I made this tutorial!

    • @aboobala5248
      @aboobala5248 4 года назад

      @@NsquaredCoding thank you very much.

  • @shaderone07
    @shaderone07 3 года назад +3

    Wow this is exactly what i need . Thank you. I hope your channel grows faster.♥

    • @NsquaredCoding
      @NsquaredCoding  3 года назад +1

      I'm happy to hear that it was exactly what you needed. Thank you so much for your positive words! I'm hoping it grows faster as well!

  • @mehmetfndk6770
    @mehmetfndk6770 2 года назад

    Thank you so much!!! I have been trying to solve this for an hour.

  • @fzkod
    @fzkod 3 года назад

    I was so happy when it worked...thanks for all the info

  • @DeidaraC5
    @DeidaraC5 3 года назад

    Didn't work for me until I realized I was removing child before doing the copy! Great video and thank you for explaining this.

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      Glad you got it to work! You're very welcome!

  • @luc-retienne5831
    @luc-retienne5831 13 дней назад

    Thanks , amazing

  • @onecornflower
    @onecornflower 3 года назад

    Thank you so much! This is exactly what I needed.

  • @JRBlaxStudios
    @JRBlaxStudios 4 года назад +2

    Thank you for this tutorial!
    This really helped me find a solution to copy text inside an element. I was having a difficult time with urls inside a table. I could not use it inside a . So I had to place a inside the . I would have preferred to have the items inline. Nevertheless, it works in a single record. How can I use the same technique with a repeat region?

  • @ahmedhayelmouhit6649
    @ahmedhayelmouhit6649 2 года назад

    Thanks 😊😊

  • @Tryftz
    @Tryftz Год назад

    Thank you so much brother ❤

  • @georgeminkin5812
    @georgeminkin5812 3 года назад

    Nice Video, + answer for Krishan Kumar
    console.log('Copied to clipboard: ' +elementText);
    alert('Copied to clipboard & Console ' );

  • @KmillionaryShopifyExperts
    @KmillionaryShopifyExperts 3 года назад

    Thanks a lot!

  • @Unity846
    @Unity846 2 года назад

    can you show how to move text in clipboard

  • @abrar9596
    @abrar9596 3 года назад +1

    hey it's been said by many that execCommand won't work in the near future is it true
    developer.mozilla says it please checkout should I use it or not?

    • @NsquaredCoding
      @NsquaredCoding  3 года назад +1

      Yeah I completely understand. Look into using the clipboard API. That is the new way to do the same thing. However it is not compatible with IE11.
      If you don't care about that then that is the best approach :)
      If browsers stopped supporting execCommand I can only imagine how websites would have to update their code!

    • @abrar9596
      @abrar9596 3 года назад

      @@NsquaredCoding can you make video on clipboard api
      And can I use execCommand without any issue.

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      Yes I can make a video on the clipboard API! Thanks for the feedback. As far I know execCommand is cross browser compatible but I'm a windows user so I can't confirm on safari.

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      ruclips.net/video/O269ctk5b5k/видео.html
      Here's the video using the clipboard API to do the same thing if you're interested!

  • @WitchGameer
    @WitchGameer Год назад

    thank youu

  • @raulrothschild
    @raulrothschild 4 года назад

    Thanks! Very good! :)

  • @Gev76
    @Gev76 3 года назад

    Hi there, how can I copy more then 1 input text to the clipboard? I have 6 inputs and I want to copy the value + label of each one

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      This is an interesting problem.
      When you copy all the inputs and let's the user goes to paste it, will it be easily understandable? Or do you need to format that text before copying the value and label?

    • @Gev76
      @Gev76 3 года назад

      @@NsquaredCoding HI there, no need format, just the text in each input.. I have a form that only have numbers, the label indicates the meaning of each number...

  • @georgeminkin5812
    @georgeminkin5812 3 года назад

    Easy to follow video, nicely done. How about if I want to type the text to be copied?

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      If you want it to be copied after you type then you may have to look into using an event handler.
      I would using on change but maybe look into onblur so that it will get copied after you lose focus on the input element.

  • @prajwalbasnet5205
    @prajwalbasnet5205 2 года назад

    when i use input all the copy content came in one line ? how to fix it ?

    • @NsquaredCoding
      @NsquaredCoding  2 года назад

      Yes that would be the expected behavior if you paste the text to be in one line If I understand you correctly. What is your use case?

  • @nellyyusnitaa2061
    @nellyyusnitaa2061 3 года назад

    Thank youuu

  • @claudgomezg
    @claudgomezg 3 года назад

    Hey! What if I only need to copy the text and not to show the copied text on an input?
    I don't know how to solve this :C

    • @NsquaredCoding
      @NsquaredCoding  3 года назад +1

      So you just want the user to be able to copy text by clicking a button but not show the text they are copying?

    • @claudgomezg
      @claudgomezg 3 года назад

      @@NsquaredCoding yes ;(

    • @claudgomezg
      @claudgomezg 3 года назад

      @@NsquaredCoding I mean, i don't want to show the new input

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      Yeah that's definitely doable. Just show the button and I think you can just hardcore the string that you want copied.

  • @teoreat
    @teoreat 2 года назад +1

    document.execCommand('copy') - deprecated 👎

  • @brandongamingnl9753
    @brandongamingnl9753 3 года назад

    Im 13 and i love coding, but i hate my sleeping rhytem, its 2:44 my time, so freak you sleep lmao
    Also ty for the great video

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      Haha! Keep leveling up, you're gonna become an expert.

  • @krishna_mahaur
    @krishna_mahaur 4 года назад

    nice video sir..but how can we show some message just like *copied* after clicking on button?
    it would be great if you could have added this functionality.

    • @NsquaredCoding
      @NsquaredCoding  4 года назад +1

      One way you can show that message is in a toast. I created a tutorial on how to create a toast message. I think that would be a great use case in this scenario.
      ruclips.net/video/GP2VK3o-TGs/видео.html

    • @krishna_mahaur
      @krishna_mahaur 4 года назад

      @@NsquaredCoding can I implement it in a page of wordpress website

    • @krishna_mahaur
      @krishna_mahaur 4 года назад

      i am getting message on middle of the screen i want it in bottom how can i do that
      snipboard.io/DWlGod.jpg
      see the screen shot

    • @NsquaredCoding
      @NsquaredCoding  4 года назад

      You need to use position absolute property here to position at the bottom of the screen.

  • @prajwalbasnet5205
    @prajwalbasnet5205 2 года назад

    bro when i creat textarea instead of input it doesnot work why ??

    • @prajwalbasnet5205
      @prajwalbasnet5205 2 года назад

      when i use input all the copy content came in one line ? how to fix it ?

    • @NsquaredCoding
      @NsquaredCoding  2 года назад

      Textarea will behave differently than input I believe. I created another video with copy using a different technique. It is fairly recent. Please check that to see if that helps!

  • @rahulr9636
    @rahulr9636 3 года назад

    Not working on safari

    • @NsquaredCoding
      @NsquaredCoding  3 года назад

      I'll look into it today and get back to you!
      I'm primarily a windows user so I am not able to test on safari easily haha.
      Just did a quick search to confirm that execCommand is usable with Safari so it must be something else!

  • @ibrahimjomaa6548
    @ibrahimjomaa6548 4 года назад

  • @romanhossainshaon4610
    @romanhossainshaon4610 3 года назад

    too complex