How to link insert events on keyboard and mouse?

Question

I have three text fields and a button that contains a unique URL. When I click on the copy button, it should copy the specific value of the text field, and I need to link with Ctrl + v and right-click and paste the event through the jQuery or javascript function.

When I focus the cursor in the address bar of the browser, and when I use the Ctrl + v event or right click and paste go , it should paste the copied url from the text box and go to a specific URL.

So, how can I bind the paste event in jQuery / javascript after clicking the copy button?

Answer 1

Mark FIDDLE how to do this in the input and text box. Both mouse and keyboard events are supported.

HTML:

 <p> <input class="js-copytextinput" value="http://www.stackoverflow.com"></input> <button class="js-textinputcopybtn">Copy Text Input</button> </p> <p> <textarea class="js-copytextarea">http://www.stackexchange.com</textarea> <button class="js-textareacopybtn">Copy Textarea</button> </p> 

JS:

 //textinput copy var copyTextinputBtn = document.querySelector('.js-textinputcopybtn'); copyTextinputBtn.addEventListener('click', function(event) { var copyTextinput = document.querySelector('.js-copytextinput'); copyTextinput.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text input command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } }); 

Source: Excerpt from a response provided by Dean Taylor, with minor changes.

You can link the copied copy and cut events in jQuery like this,

 $(".select").bind({ copy : function(){ $('span').text('copy behaviour detected!'); }, paste : function(){ $('span').text('paste behaviour detected!'); }, cut : function(){ $('span').text('cut behaviour detected!'); } }); 

Check Fiddle for snapping copies, cut and paste events through jQuery.

• Both key and mouse events are cut, copy, and paste related.

 $(document).ready(function() { //textinput copy var copyTextinputBtn = document.querySelector('.js-textinputcopybtn'); copyTextinputBtn.addEventListener('click', function(event) { var copyTextinput = document.querySelector('.js-copytextinput'); copyTextinput.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text input command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } }); //textarea copy var copyTextareaBtn = document.querySelector('.js-textareacopybtn'); copyTextareaBtn.addEventListener('click', function(event) { var copyTextarea = document.querySelector('.js-copytextarea'); copyTextarea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text area command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } }); }); 

 http://www.stackoverflow.comhttp://www.stackexchange.comhttp://www.stackoverflow.comhttp://www.stackexchange.com 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <input class="js-copytextinput" value="http://www.stackoverflow.com"></input> <button class="js-textinputcopybtn">Copy Text Input</button> </p> <p> <textarea class="js-copytextarea">http://www.stackexchange.com</textarea> <button class="js-textareacopybtn">Copy Textarea</button> </p> 

Hope this helps.

Answer 2

 $(document).ready(function() { $("#editor").bind('paste', function (e){ $(e.target).keyup(getInput); }); function getInput(e){ var inputText = $(e.target).html(); alert(inputText); $(e.target).unbind('keyup'); } });