Key press adds class to element

[brianatlarge]

I’m making a proof of concept for a little web app I’ve been thinking about. I’ve been reading up on how javascript does keypress behavior, but I’m not sure exactly how to start.

Basically what I have is a textarea and then a list of the letters of the alphabet in <li> tags. What I want to do is whenever a particular key is pressed, a class is assigned to that li element. For example, whenever the letter c is pressed, a class is assigned to the <li>c</li> tag. Also, when the key is let off, that class gets removed.

Can someone help me get on the right track?

[akeenlabs]

If I understand what you’re talking about, the following code should do the trick:

Code:

• c
• d

This uses the jQuery JavaScript library, but all of this would still be possible otherwise, but much harder. If I need to explain the code, just let me know. Sometimes I know I just want to see a working example and I’d rather find out how it works myself (hopefully it will work, I only tested it in Firefox).

[akeenlabs]

"brianatlarge" wrote:

Holy crap, that did exactly what I was looking for. Thanks so much!!!

I’m slowly learning javascript/jquery, and looking at this and figuring out how it actually works will help me out a lot.

Thanks!!

Great! I’m glad it helped. jQuery is great; no, jQuery is amazing. :D

[Stack]

The same with standard javascript. Dont really require more script than jQuery but figured i would write it up to help ya break it down to learn a bit more about how its done. (reduce timeout to make it change black again faster):

Code:

• a
• b
• c
• d

[akeenlabs]

"Stack" wrote:

The same with standard javascript. Dont really require more script than jQuery but figured i would write it up to help ya break it down to learn a bit more about how its done. (reduce timeout to make it change black again faster):

Code:

• a
• b
• c
• d

No offense, but I wouldn’t call this "the same with standard JavaScript" because it doesn’t actually trigger based on the key that was pressed. In my opinion, it’s more of a hack that happens to work 75% of the time. For instance, what if the keypress was triggered by a backspace or one of the arrow keys? The last character in the textbox gets highlighted as if that key was pressed.

Sorry to be so negative, but they guy is trying to learn about events and you completely overlooked event arguments that are passed with each keypress event.

[Stack]

a very valid point. next time ill be sure to spend a lil more than 30 seconds writting up a script before i post lol

[Stack]

this time usin event handlers. keyCode and which both return numbers saying which key you press. a-z is 65-90 for other keys go here http://www.aspdotnetfaq.com/Faq/What-is-the-list-of-KeyCodes-for-JavaScript-KeyDown-KeyPress-and-KeyUp-events.aspx. this a little more accurate for ya :)

Code:

• a
• b
• c
• d

[James]

@Stack,

You shouldn’t be sniffing "navigator.appName" just to target a specific property (entirely unrelated). Instead you should be checking for the existence of either property and then using whichever one is available.

[Stack]

Ya i dunno y it posted that, i posted the right one above. been havin some problems with this forum for some reason lately. Anyways changed it to what it was supposed to be. Anyone else having the issue where u need to log in like 3 times in order to post? lol. yes cookies are on. dunno 0_o

[Author]

Posts