I am trying out this simple code. What I want is that when a paste event is fired on the second input textbox, it should be cleared, after copying its contents, removing the readonly attribute of the previous textbox, and pasting it there. however, nothing is happening.
The paste event is fired alright, because if I replace the code in the timer by a simple alert, it works. Can anyone tell me what's wrong here?
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".boo").bind("input paste",function() {
elem = this;
setTimeout(function() {
$(".foo").removeAttr("readonly");
$(".foo").text($(elem).text());
$(elem).text("");
},100);
});
});
</script>
</head>
<body>
<input class = 'foo' type = 'text' /><input class = 'boo' type = 'text' />
</body>
</html>
I am trying out this simple code. What I want is that when a paste event is fired on the second input textbox, it should be cleared, after copying its contents, removing the readonly attribute of the previous textbox, and pasting it there. however, nothing is happening.
The paste event is fired alright, because if I replace the code in the timer by a simple alert, it works. Can anyone tell me what's wrong here?
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".boo").bind("input paste",function() {
elem = this;
setTimeout(function() {
$(".foo").removeAttr("readonly");
$(".foo").text($(elem).text());
$(elem).text("");
},100);
});
});
</script>
</head>
<body>
<input class = 'foo' type = 'text' /><input class = 'boo' type = 'text' />
</body>
</html>
- 1 use val() instead of text() for input:text – Dr.Molle Commented Jan 19, 2013 at 14:50
-
1
Declare "elem" with
var!! – Pointy Commented Jan 19, 2013 at 14:53 -
Well, did that (I can't believe that I was using
textinstead ofval!). However, now the 2nd textbox is being cleared, but the first textbox isn't populated with its value... – NedStarkOfWinterfell Commented Jan 19, 2013 at 14:53 - 1 That's really a silly way to go about things. You don't just do it for cosmetic purposes; it makes a serious difference to the semantics of the code. – Pointy Commented Jan 19, 2013 at 14:55
-
1
Are you still using
.text()instead of.val()to get the value of the other input? – Pointy Commented Jan 19, 2013 at 14:55
1 Answer
Reset to default 5First of all, you should use .val() instead of .text() with input control.
$(document).ready(function () {
$("input.boo").bind("paste", function () { //also changed the binding too
var elem = $(this);
setTimeout(function () {
$(".foo").val(elem.val());
elem.val("");
}, 100);
});
});
Also, your bound event(s) were fired twice when text is pasted in the control. That's because, you have bound both input and paste events to the element(s) with "boo" class.
So here, instead of:
$(".boo").bind("input paste", function() {});
Use this:
$("input.boo").bind("paste", function() {});
This will bind only the paste event to input elements with "boo" class.
See updated jsFiddle example.