I have three textbox and button which contains a unique URL. When clicking on copy button, it should copy the particular textbox value and I need to bind with Ctrl+v and mouse right click and paste event via jQuery or javascript function.
When I focus the cursor in browser address bar and when I use Ctrl+v or right click and paste go
event it should paste the copied url from textbox and go to particular URL.
So how can I bind paste event in jQuery/javascript after clicking copy button?
I have three textbox and button which contains a unique URL. When clicking on copy button, it should copy the particular textbox value and I need to bind with Ctrl+v and mouse right click and paste event via jQuery or javascript function.
When I focus the cursor in browser address bar and when I use Ctrl+v or right click and paste go
event it should paste the copied url from textbox and go to particular URL.
So how can I bind paste event in jQuery/javascript after clicking copy button?
Share Improve this question edited Aug 7, 2015 at 12:09 Lucky 17.4k19 gold badges120 silver badges156 bronze badges asked Apr 2, 2013 at 6:34 Ravi KavaiyaRavi Kavaiya 8496 silver badges16 bronze badges 5-
2
Is it
past
event orpaste
event? – Antony Commented Apr 2, 2013 at 6:38 - i need to bind with paste event and ctrl+v . – Ravi Kavaiya Commented Apr 2, 2013 at 6:39
- Have a look at this stackoverflow./questions/11605415/… – MattP Commented Apr 2, 2013 at 6:44
- Mattp : yes i tried it but it's not working right – Ravi Kavaiya Commented Apr 2, 2013 at 6:48
- have a look at this text2clipboard./demo.php – Lucky Commented Apr 2, 2013 at 7:43
2 Answers
Reset to default 4Check this FIDDLE on how to do this in a input and textarea. Both mouse and keyboard events are supported.
HTML:
<p>
<input class="js-copytextinput" value="http://www.stackoverflow."></input>
<button class="js-textinputcopybtn">Copy Text Input</button>
</p>
<p>
<textarea class="js-copytextarea">http://www.stackexchange.</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 mand was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
Source: Snippet from the answer provided by Dean Taylor with little modifications
You can bind the copy paste 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 this Fiddle on binding the copy, cut and paste events via jQuery.
- Both the key and mouse events are bound in the cut, copy and paste.
$(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 mand 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 mand was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
});
http://www.stackoverflow.http://www.stackexchange.http://www.stackoverflow.http://www.stackexchange.
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<input class="js-copytextinput" value="http://www.stackoverflow."></input>
<button class="js-textinputcopybtn">Copy Text Input</button>
</p>
<p>
<textarea class="js-copytextarea">http://www.stackexchange.</textarea>
<button class="js-textareacopybtn">Copy Textarea</button>
</p>
Hope this helps..
$(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');
}
});