12

I have been working on something that requires me to use the space bar to trigger an event. The thing I've been working on is much more complex but i've simplified it down to basics as an example of what I needed to do.

The idea is that when the space bar is held down it highlights this div and when it is let go it un-highlights. I had a problem that when I was pressing down space, the default was to make the scrollbar jump down in stages. To deal with this I tried adding prevent default and then ended up using return false.

This was great...until I realised that when I was testing typing into input field text boxes I had taken away my ability to put a space whilst typing.

What I think I need is either:

  • To (undo) the prevent default or return false somehow after I've finished using it although I couldn't figure out how to do this because I needed this function to be available on the whole page.
  • Stop the spacebar from making the page scroll down when held but still keep it's ability to add spaces when typing text.

Really not sure how to do this.

Here is the code I am using for this example:

HTML

<div class="container">
    <div class="moo">I am moo</div>
    <input/>
</div>

CSS:

.container {
     height:9000px;   
}
.moo {
    border:1px solid black
}
.red {
    background:red;
}
input {
    margin-top:30px;
}

SCRIPT:

$(document).keydown(function(e) {
    if(e.keyCode === 32) {
        $('.moo').addClass('red');
        //event.preventDefault();
        //event.stopPropagation();
        return false;
    }
    else {
        $('.moo').removeClass('moo');
    }
});
$(document).keyup(function(e) {
    if(e.keyCode === 32) {
        $('.moo').removeClass('red');
        event.stopPropagation();
    }
});

DEMO HERE

Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
Suzi Larsen
  • 1,420
  • 5
  • 18
  • 32

3 Answers3

12

DEMO

Capture keypress event instead and toggleClass red and you can check whether the target item is body or input element using e.target.nodeName

$(document).keypress(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault(); //prevent default if it is body
    }
});

Or if you want to keep the blink on keyup and keydown just keep both the events as below:

$(document).keydown(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault();
    }
});
$(document).keyup(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault();
    }
});

DEMO

Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
  • thats great! Although one problem. The event needs to be triggered for as long as the space bar is held down and then when it is released it removes class. – Suzi Larsen Aug 19 '15 at 13:10
  • 1
    Brilliant! that works perfectly!! One tiny minor thing is that the keyup one would need to be addClass and the bottom removeClass but that's just for it to be perfect. Thankyou so much!!! – Suzi Larsen Aug 19 '15 at 13:22
  • Anytime.. happy coding.. :) – Guruprasad J Rao Aug 19 '15 at 13:24
3

This is how I would do it:

$("input").keydown(function(e) {
    if(e.keyCode === 32) {
        $(this).val($(this).val()+ " ");
    }
});

Here is the JSFiddle demo

Ahs N
  • 8,233
  • 1
  • 28
  • 33
0

Check the e.target which tells you what DOM element was focused when the keydown/keyup events were activated. Don't disable the default handling of the event if it the target is of type textarea or input

Iftah
  • 9,512
  • 2
  • 33
  • 45