Jump to content

Ctrl+Key Detection


Chocolate570
 Share

Recommended Posts

Hey guys. =)I'm writing a rich text editor (it's almost done. :)) but I was hoping to add some advanced functionality and execute the bold command if you click ctrl+b and the italic command if you press ctrl+i, and so on. But I don't know how to do that. =[i found a code that does detect those on blogger (their rich text editor has the functionality) but I don't want to steal it.Here it is, if it helps you:http://www.blogger.com/app/scripts/event.keypress.jsCan you help me a bit? I know how to detect regular presses, but control presses along with it... :/

Link to comment
Share on other sites

I don't think detecting the control key is a good idea. It's very easy to get in conflict with an actual program shortcut.Can't you just use plain access keys? You know, the accesskey attribute?

Link to comment
Share on other sites

True. But I don't want to use access keys---they wont exactly add what I'm really looking for.Maybe I could require the user to press an obscure short cut---or, if they press control twice and then a key, it'll add that formatting? =)

Link to comment
Share on other sites

I have a better idea. Detect if a key that otherwise doesn't have an effect is pressed. A replacement for CTRL that is. For example DEL. Imagine the combos DEL-B, DEL-I. I would have suggested INS, but INS has it's own effect of changing the overwrite mode, so it's not a good idea either.Pressing CTRL once or twice in a row + a letter might be a good idea too, but I have no idea how would you implement that.

Link to comment
Share on other sites

Check out this page, Choco: http://www.w3schools.com/htmldom/event_ctrlkey.asp
e = (e) ? e : window.event;var keycode = (e.which) ? e.which : e.keyCode;if(e.ctrlKey && keycode == 13){   alert("CTRL-ENTER was typed!");}

Well, the problem is I can't detect more than one key with that. :/
Pressing CTRL once or twice in a row + a letter might be a good idea too, but I have no idea how would you implement that.
What I could do is the moment the ctrl key is pressed, I could set a timer for about 1 second and if the key is pressed again in that time (I'd keep a while running, keeping check on the window events, and when the timer goes off, set a variable which ends the while) then set another timer the same way and look for another key. Then store that key and perform the action.But would that work? :/
Link to comment
Share on other sites

You could set a variable to keep track of whether CTRL is pressed and check it when you look for what key is being pressed:

var isCtrl = e.ctrlKeyswitch(keycode){	case 48: // b		if(isCtrl)			 // make bold!		break;	case 23: // i		if(isCtrl)			// make italic!		break;}

Link to comment
Share on other sites

You could set a variable to keep track of whether CTRL is pressed and check it when you look for what key is being pressed:
var isCtrl = e.ctrlKeyswitch(keycode){	case 48: // b		if(isCtrl)			 // make bold!		break;	case 23: // i		if(isCtrl)			// make italic!		break;}

No matter what I do, that code doesn't work. Why not? =[
Link to comment
Share on other sites

just a note choco. That code I gave you a while back already works with CTRL+B, etc...except in Firefox...Firefox already has shortcuts setup on CTRL+B and some other common formatting combos (stupid if you ask me) so I don't know if your key press detection could override that or if Firefox functiosn take precidence. Might be better to come up with your own combos, I like the CRTL, CTRL, B idea.

Link to comment
Share on other sites

Looks like I used a wrong reference for the keycodes, sorry!I put this in the Tryit editor and it worked for both IE and Firefox - it even, because of the return falses - overwrites the default behavior for things like CTRL-B and CTRL-I.I hope it helps!

<html><head><script>function test(e){  e = (e) ? e : window.event;  var keycode = (e.which) ? e.which : e.keyCode;  var ctrl = e.ctrlKey  if(ctrl)  {    switch(keycode)    {      case 66:  //b        document.getElementById("div").innerHTML = "BOLD!";        return false;        break;      case 73:  //i        document.getElementById("div").innerHTML = "ITALIC!";        return false;        break;      default:         document.getElementById("div").innerHTML = keycode;        break;    }  }  else  {    document.getElementById("div").innerHTML = keycode;  }}document.onkeydown = test;</script></head><body>  <div id="div"></div></body></html>

Link to comment
Share on other sites

Hey, thanks! That works pretty well.But when I click inside my rich text editing area, it doesn't register ctrl+b or ctrl+i, and if I click it outside, it still opens the bookmarks section. I think it will only work if it's in a frame, and that's slightly inconvenient.Any other ideas?By the way, you can see what I have here:http://www.seekond.com/scripts/richtext.html

Link to comment
Share on other sites

Rather than registering test as an event handler for the keydown event on the document ( document.onkeydown = test; ) try registering it for the keydown event for your ricttext element. This way, if someone has focus on the area outside of the editor and clicks CTRL-B to open his/her bookmarks window, it'll still let him/her.Without looking too deeply at your code, maybe rather than:

document.onkeydown = test;

You might try something like:

document.getElementById(iframe.id).contentDocument.onkeydown = test;

Link to comment
Share on other sites

Rather than registering test as an event handler for the keydown event on the document ( document.onkeydown = test; ) try registering it for the keydown event for your ricttext element. This way, if someone has focus on the area outside of the editor and clicks CTRL-B to open his/her bookmarks window, it'll still let him/her.Without looking too deeply at your code, maybe rather than:
document.onkeydown = test;

You might try something like:

document.getElementById(iframe.id).contentDocument.onkeydown = test;

Thanks so much! I tried that, but I forgot the contentDocument part, so nothing worked. I'll try it again. =)
Link to comment
Share on other sites

  • 3 weeks later...

Stuff like Ctrl+B and Ctrl+I is detected automatically bye IE and FF I believe

Link to comment
Share on other sites

That would happen even if you DO put the seperate [Ctrl] key detection

Link to comment
Share on other sites

That would happen even if you DO put the seperate [Ctrl] key detection
No, because you could return false when the key is pressed and tell the browser not to open the sidebar.
Link to comment
Share on other sites

oh...I did not know that could be done..sorry for that :)

Link to comment
Share on other sites

  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...