Grow your CSS skills. Land your dream job.

Key press adds class to element

  • # April 22, 2009 at 12:55 am

    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?

    # April 22, 2009 at 8:41 pm

    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).

    # April 25, 2009 at 2:42 pm

    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!!

    # April 26, 2009 at 10:32 pm
    "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

    # May 9, 2009 at 2:36 am

    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


    # May 11, 2009 at 5:18 pm
    "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.

    # May 13, 2009 at 9:58 am

    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

    # May 13, 2009 at 10:49 am

    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


    # May 21, 2009 at 4:02 am

    @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.

    # May 21, 2009 at 10:55 am

    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".