How to allow only Ctrl/Cmd-A and Ctrl/Cmd-C in text field?

Forum Moderators: open

Message Too Old, No Replies

How to allow only Ctrl/Cmd-A and Ctrl/Cmd-C in text field?

Want to disable text entry, but allow Select All / Copy

MichaelBluejay

3:31 pm on May 25, 2010 (gmt 0)

Given a simple text field (<input id=theField>), how do I allow the user to click to get a cursor and do Control/Command-A and Control/Command-C (to select and copy the contents), but disallow any actual input into the field?

Please don't assume I know much about JavaScript event handling. I think my solution will involve onkeydown="if (some condition) return false" but that's about the extent of my understanding. I tried to Google the answer but I didn't understand a lot of it, and couldn't craft a solution from what I found.

subexpression

11:45 pm on May 29, 2010 (gmt 0)

MichaelBluejay,

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var test = new function(){
var self = this;
self.events = {
'addevent': function(eventtype,obj,method){
try {
if(obj.addEventListener){obj.addEventListener(eventtype,method,true);}
else if(obj.attachEvent){obj.attachEvent('on' + eventtype,method);}
else {return false;}
}catch(err){}
return true;
}
};
self.keys = {
'textarea': '',
'ctrl': false,
'load': function(txt){
this.textarea = document.getElementById(txt);
self.events.addevent('keydown', this.textarea, this.keydown);
self.events.addevent('keyup', this.textarea, this.keyup);
},
'keydown': function(e){
var keycode = (!e) ? window.event.keyCode : e.which;
if(keycode == 17){
self.keys.ctrl = true;
}
if(!self.keys.ctrl){
self.keys.textarea.blur();
return false;
}
if((keycode == '65' && self.keys.ctrl) || (keycode == '67' && self.keys.ctrl)){
return true;
}
for(var i = 18; i <= 222; i++){
if(self.keys.ctrl && keycode == i){
try {
e.stopPropagation();
e.preventDefault();
}
catch(err){
e.cancelBubble = true;
e.returnValue = false;
}
self.keys.textarea.blur();
return false;
}
}
},
'keyup': function(e){
var keycode = (!e) ? window.event.keyCode : e.which;
if(keycode == 17){
self.keys.ctrl = false;
}
}
};
};
window.onload = function(){
test.keys.load('textarea');
}
</script>
</head>
<body>
<textarea id="textarea">testing testing testing</textarea>
</body>
</html>

subexpression

11:54 pm on May 29, 2010 (gmt 0)

MichaelBluejay,

Oops! I misread...I thought you said textarea...but you meant text input.

Well, the same example will work with <input> tags.

Just change it up to suit your needs.

MichaelBluejay

2:47 pm on May 30, 2010 (gmt 0)

Wow, that was a much lengthier solution than I expected, so you really put some effort into it. Thanks so much!

subexpression

3:38 pm on May 30, 2010 (gmt 0)

Yeah, 57 lines of JS

But, every contingency had to be accounted for since it's a 2-key combination.
The Ctrl key is pressed first, which sets the ctrl flag to true.
If the Ctrl key is let up before another keystroke, the ctrl flag is set to false.
If the Ctrl key is pressed and 'a' (keycode 65), or 'c' (keycode 67), then the keydown() method returns true.
Else, it would return false.

I had to make sure that events for key combinations like Ctrl+s, Ctrl+g, Ctrl+r, Ctrl+t, etc. were not allowed to propagate. Otherwise, an inexperienced user might accidentally hit Ctrl+w and close the page.

MichaelBluejay

12:39 pm on Jun 1, 2010 (gmt 0)

Yes, I see your logic, and the care you put into crafting the solution. You're much better at this than I am, but I learned from your example. Thanks again.