CODEWITHSUNDEEP
javascriptlaravelvue.jsvue-component
Veenavi Anutthara
Veenavi Anutthara

Reputation: 125

Copy text to clipboard on anchor tag click in VueJS issue

In my laravel/Vue application, I have an option to copy the link to the clipboard.

I have the following in my component.

<a @click="copyURL" ref="mylink">
        <img class="social_icon" 
          src="/images/game/copy.png"
        /></a>
        <input type="text" class="copyurl_txt" 
        value="https://mysite.site/" ref="text"></input>

in my scripts I have,

<script> 
export default {   
methods: {
            copyURL() {
              this.$refs.text.select();
              document.execCommand('copy');
            }
          },
};
</script>

This works well but Every time when I try to display none of the copyurl_txt it's not copying the value...

How can I copy the text(current value in the text field) to the clipboard on link click without displaying that text box...

Upvotes: 0

Views: 315

Answers (1)

Volka Dimitrev
Volka Dimitrev

Reputation: 387

If you just want to hide the input field, you can use the following CSS,

.copyurl_txt{
  max-width: 0px;
  max-height: 0px;
  border: transparent;
}
input[type=text]:focus{
  max-width: 0px;
  max-height: 0px;
  border: transparent;
  outline: none!important;
}

'focus' will hide the blue color out line of the textbox when it's selected.

Upvotes: 1

Related Questions