Grow your CSS skills. Land your dream job.

disable shift key / multiple action for event

  • # April 29, 2009 at 3:50 pm

    I guys, I’m having a little problem with an event.

    What I have is a textarea that is set so that when you begin typing in it, a timer starts. I’ve got that working by checking if there is just one character is in the textarea. If there is, then it starts the timer. This is so if you keep typing, it doesn’t continually initializing the timer so the clock doesn’t run super fast.

    Code:
    function checkLength() {
    var mainText = document.getElementById(“maintext”).value;
    var textLength = (mainText.length);
    if (textLength == “1″) {
    startTimer()
    }
    }
    Code:

    I’m triggering this event with onkeypress. My problem is when you begin typing with a capital letter. You have to press shift+key. Javascript sees this as two keypresses with one character in the textbox, so the timer begins counting at 2x speed.

    Is there a way to keep the onkeypress from responding to the shift key?

    Also as you can see, I have two actions occurring both using the onkeypress event. However, only the first action occurs. Is there any way to make it so that I can have more than one action occur when an event is triggered?

    Thanks.

    # April 29, 2009 at 10:41 pm

    I hate to reply to another of your posts…

    The onclick event should not fire an event for the shift key. I tried it in Firefox 3 and IE 7 and they both only fired an event once for a shift+key combination. I’ve never heard of that happening before; maybe you’ve somehow registered the event twice (which would be ironic since the last part of your post asked how to do that).

    As for multiple events…you need to take advantage of JavaScript’s flexibility when it comes to functions: they are just variables like anything else; that’s why you can declare a function like this:

    Code:
    var myFunc = function(){ }

    You also need to take advantage of the fact that JavaScript doesn’t really support objects in the traditional sense; the syntax that we use when we use "objects" is really just a wrapper around a named collection (or key-value collection, or hash, or whatever you want to call it). For example, these two pieces do the same thing:

    Code:
    myObject.myProperty

    myObject['myProperty']

    With all that said, take a look at this which uses a common routine to add an event to an object:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">








    I hope this helps; I also hope I answered the question you asked. :)

    # April 29, 2009 at 11:32 pm

    I was able to fix the shift key problem by changing

    Code:
    onkeyup=”checkLength()”

    to

    Code:
    onkeyup=”if (!(event.keyCode==16 || (event.keyCode==9 && event.shiftKey)))
    {checkLength();}”

    As far as having multiple actions for the event, the purpose for that was because when using onkeyup, if I began typing by holding down a key, the startTimer function would never be called. Only by using onkeypress would it be called. Unfortunately, another behavior that needs to happen also relies on onkeypress. This is why I wanted to use onkeypress for both of these actions.

    As for now, I’m leaving it as onkeyup because the way people will be using the text area, it’s unlikely that they’ll just hold down a button long enough for it to be an issue, unless they’re just typing in gibberish which the purpose of the text area is defeated.

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

You must be logged in to reply to this topic.

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