If you have worked on projects involved dynamic UI having client side input validations, then you can recall that it is very common practice among QA/testers that they try to copy lots of garbage text to create invalid scenarios and log them as a bug. I will not comment on validity of these kind of issues. Here in this post, I will give you a solution which you can use to solve this problem if it happens to you.
Please note that this will work always. No matter you generate these events with keyboard or mouse.
Read More: Difference between keypress and keydown events and Detect ENTER key
Detect CUT COPY or PASTE events
To detect these events you need to bind following events in given manner for any input area.
$(document).ready(function() {
$("#textA").bind({
copy : function(){
$('#message').text('copy behaviour detected!');
},
paste : function(){
$('#message').text('paste behaviour detected!');
},
cut : function(){
$('#message').text('cut behaviour detected!');
}
});
});
Try yourself
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
span{
color:green;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Detect Cut, Copy and Paste with jQuery</h1>
<form action="#">
<label>Text Box : </label>
<input id="textA" type="text" size="50" value="Copy, paste or cut any text here" />
</form>
<span id="message"></span>
<script type="text/javascript">
$(document).ready(function() {
$("#textA").bind({
copy : function(){
$('#message').text('copy behaviour detected!');
},
paste : function(){
$('#message').text('paste behaviour detected!');
},
cut : function(){
$('#message').text('cut behaviour detected!');
}
});
});
</script>
</body>
</html>
Happy Learning !!
Leave a Reply