• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Tutsplanet

Tutsplanet

Free Technical and Blogging Resources

  • Home
  • Web Hosting
  • Programming
  • Plugins
  • Twitter Trends
  • Tools
  • About Us

Programming Tagsjavascript, jQuery

Copy to Clipboard from a Textbox using jQuery/JavaScript

Oct 26, 2021 Editorial Staff Leave a Comment

Share
Tweet
Share

In this tutorial, I will show you how to copy text to the clipboard on a button click using jQuery from a textbox.

It’s very helpful for the users to click a button to copy everything in a textbox, instead of selecting and copying using the Mouse.

So today’s tutorial, we will have a textbox and a clickable copy button in a form.

Javascript

We create a false textarea element in the DOM, which you will not see it anywhere on the page. Next, we will assign the real value from our textbox to this virtual textarea. In this case, we pass the textbox value as a parameter of the function doCopyToClipboard. As a result, we will have our text copied to the clipboard by the command document.execCommand( 'copy' ). As soon as we are done with the process we will remove the textarea from the page.

function doCopyToClipboard(text) {

   var textArea = document.createElement( "textarea" );
   textArea.value = text;
   document.body.appendChild( textArea );       
   textArea.select();

   try {
      var successful = document.execCommand( 'copy' );
      console.log('Copying text command was ' + msg);
   } catch (err) {
      console.log('Oops, unable to copy',err);
   }    
   document.body.removeChild( textArea );
}

The next function will be our click event which I wrote in jQuery to demonstrate how it works in jQuery. However, you can write this in pure JavaScript as well.

$( '#btn_copy' ).click( function() {

     clipboardText = $( '#textbox1' ).val(); 
     copyToClipboard( clipboardText );
     alert( "Copied to Clipboard! Now paste to wherever you need!" );

});

HTML

<div>
  <input type="text" class="form-control" id="textbox1">
  <button type="button" class="btn" id="btn_copy">Copy</button>
</div>

In conclusion, we have our feature for copying text value from textbox to clipboard.


Editorial Staff

Editorial Staff at Tutsplanet is a dedicated team to write various tutorials about subjects like Programming, Technology and Operating Systems.

View all posts by Editorial Staff

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Quick Links

  • Top 21 Website Ideas To Make Money Online in 2021
  • A Simple YouTube Video Downloader Script in PHP
  • The 50 Most Useful jQuery Plugins for Frontend Development
  • Replace “\n” with new line characters, using Notepad++
  • Using Third-Party Libraries in Codeigniter
  • Upload Multiple Images and Store in Database using PHP and MySQL.
  • Hierarchical Tree view Category Example in Laravel
  • Laravel Image Intervention Tutorial With Example
  • How to import sql file in MySQL database using PHP?
  • Free VAT Calculator Online

Subscribe

* indicates required



Search Here

Share

   



Hot topics

  • Replace “\n” with new line characters, using Notepad++ 40 views
  • How to enter new line in Microsoft Teams? 35 views
  • Simple PHP Shopping Cart 18 views
  • Open a URL in a new tab using JavaScript 17 views
  • Add FTP/SFTP in Visual Studio Code 15 views
  • Laravel: Download files to storage from SFTP 12 views
  • How to Create PDF File From HTML Form Using Fpdf? 12 views
  • Solution: windows photo viewer opens each time save a pic file 11 views
  • Laravel Eloquent Select Column as Alias 11 views
  • A Simple YouTube Video Downloader Script in PHP 11 views

Categories

  • Design & Development
  • Drupal
  • Facebook
  • General
  • How To
  • ios
  • Javascript
  • Linux
  • Magento
  • Marketing
  • News
  • PHP
  • Plugins
  • Programming
  • Snippets List
  • Social Media
  • Softwares
  • Themes
  • Tips
  • Wordpress
  • YouTube























Copyright © 2023 · Planet on Genesis Framework · Powered By BunnyCDN . Network wallpapernoon.com