Capture Copy/Paste/Select in Javascript

Question

How can i capture the following keys in Textbox using JavaScript?

Ctl + a

Ctl + c

Ctl + v

Following is the original Situation.

I have three Textboxes for Phones numbers. Textbox1 max length is 3 , 2nd's is 3 and 3rd is 4. When user types three digits in TextBox1 the cursor moves automatically to TextBox2 same thing happens with TextBox2 as well as TextBox3. I am handling this functionality in keyup event. Now, I am parallely using your code. But it moves in keyup event as well. This case happens when all TextBoxes are filled. Now suppose I am in TextBox1 and presses Ctl + A . This moves the user to third TextBox(unacceptable case). This is the issue.

jQuery: http://stackoverflow.com/a/1503425/284240 or http://stackoverflow.com/a/238835/284240 or http://stackoverflow.com/a/2904944/284240 — Tim Schmelter, Apr 13 '12 at 11:43
http://stackoverflow.com/questions/2903991/how-to-detect-ctrlv-ctrlc-using-javascript — Chuck Norris, Apr 13 '12 at 11:44
@Tim thanks for the reply. Actually, I need it in Javascript. — Pankaj, Apr 13 '12 at 11:44
@PankajGarg there are answers attached to http://stackoverflow.com/questions/2903991/how-to-detect-ctrlv-ctrlc-using-javascript which work and do not require jQuery — tkone, Apr 13 '12 at 11:52
@PankajGarg: Actually you don't even need to download and add jQuery to your project, you can use it from `googleapis`: http://stackoverflow.com/questions/1014203/best-way-to-use-googles-hosted-jquery-but-fall-back-to-my-hosted-library-on-go — Tim Schmelter, Apr 13 '12 at 11:58

Tim Down · Accepted Answer · 2012-04-13T11:56:26.853

6

Use the select, copy and paste events respectively. Pretty much universally supported these days.

var textBox = document.getElementById("textBoxId");
textBox.onpaste = function() {
    alert("paste");
};

Likewise for the other events. Demo here: http://jsfiddle.net/timdown/EC2Hf/

edited Apr 13 '12 at 11:56

answered Apr 13 '12 at 11:44

Tim Down

318,141
75
454
536

can you please tell about ctl + A also? Thanks – Pankaj Apr 13 '12 at 11:53
@Pankaj: That's covered by the `select` event. I added a demo to my answer. – Tim Down Apr 13 '12 at 11:54
Thanks for the detailed link/Demo. +1 – Pankaj Apr 13 '12 at 12:02
This seems to make it fire twice – pbfy0 Apr 13 '12 at 12:03
@pbfy0 Can you explain it bit more please? – Pankaj Apr 13 '12 at 12:03
@Tim Down - can i set the focus also using e in the same event handler? – Pankaj Apr 13 '12 at 12:13
@PankajGarg: If you're getting any of these events then the text box must already have the focus. – Tim Down Apr 13 '12 at 12:30
@Tim, I want to pass "`this`" in the parameter list. Is it possible? Thanks – Pankaj Apr 13 '12 at 12:48
@Tim Down - Your post is failing in one scenario when you double click the text in textbox and control goes to the event handler. This should not be the case as i need to detect just ctl + A/C/V – Pankaj Apr 13 '12 at 13:16
@PankajGarg: Why do you just want the keyboard events? – Tim Down Apr 13 '12 at 13:18
@Tim - Let me explain you the complete situation first. I have three `Textboxes` for Phones numbers. `Textbox1` max length is 3 , 2nd's is 3 and 3rd is 4. When user types three digits in `textBox1` the cursor moves automatically to `TextBox2` same thing happens with `TextBox2` as well as `TextBox3`. I am handling this functionality in keyup event. Now, I am parallely using your code. But it moves in keyup event as well. This case happens when all TextBoxes are filled. Now suppose I am in TextBox1 and presses Ctl + A . This moves the user to third TextBox(unacceptable case). This is the issue. – Pankaj Apr 13 '12 at 13:27
@PankajGarg: Ah. I'd suggest using the `input` event instead then. See http://stackoverflow.com/a/5524996/96100 – Tim Down Apr 13 '12 at 14:01
@PankajGarg i get 2 dialog boxes when I copy or paste – pbfy0 Apr 15 '12 at 14:19

score 1 · Answer 2 · answered Apr 13 '12 at 11:44

1

And what about right click, osx that does not use control, the edit copy option on the browser, the button on my old keyboard, etc?

There is more than just key presses.

That said, most browsers support

oncopy and onpaste events.

answered Apr 13 '12 at 11:44

epascarello

204,599
20
195
236

score 0 · Answer 3 · answered Apr 13 '12 at 11:45

0

You would have to first check if the ctrl button was clicked and then the correspnding letter keys. This link may help you out

answered Apr 13 '12 at 11:45

Krishna

636
3
8

Capture Copy/Paste/Select in Javascript

Following is the original Situation.

3 Answers3