onKeyPress Doesnt Work At All!

StackOverflow https://stackoverflow.com/questions/6060377

  •  15-11-2019
  •  | 
  •  

Question

I have 5 click-able div tags, the div's display a yellow square with a number in. When the user clicks a square, the colour of the square changes to indicate that the clicked square is the ''active'' square (This part works fine). Then the user should be able to press a number. When the number is pressed, the number displayed in the div should change to the number they have pressed!

BUT... It doesn't work! as a div attribute, I have onkeypress="(function to change innerHTML of the tag)".

For testing purposes I wrote onkeypress="alert('key');" as a div attribute to see if it was my javascript function, or the onKeyPress itself! but the Alert wont even display!

I tried putting the onKeyPress alert in the body tag, and it worked fine. its just the div! I also tried pressing a key before I clicked on the div and after I clicked on the div!

I also tried onkeydown and onkeyup!

I really cant see the problem! Code follows:

<html>
<head>
<style type="text/css">
#grid {
    position:absolute;
    padding: 0;
    border:0;
    width:370px;
    height:370px;
}
.box
{
    position:absolute;
    border: 2px solid Black;
    height: 50px;
    width: 50px;
    vertical-align: middle;
    text-align: center;
    background-color: yellow;
    font-size: xx-large;
    color:Navy;
    font-family: Arial;
    margin:10px;
    line-height:1.6;
}
.boxActive
{
    background-color:Aqua;
}
</style>

<script type="text/javascript>
function clicked(id) {
    reset();
    $(id).addClass('boxActive');
}
</script>

<script type="text/javascript" src="JQuery.js"></script>

</head>
<body>
    <div id="grid">
        <div id="cell_0_0" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:0%; ">0</div>
        <div id="cell_0_1" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:20%; ">0</div>
        <div id="cell_0_2" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:40%; ">0</div>
        <div id="cell_0_3" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:60%; ">0</div>
        <div id="cell_0_4" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:80%; ">0</div>            
    </div>
</body>
</html>

Can anybody suggest how to fix this OR a method to change the innerHTML of the div Tags when a user clicks the div and presses a key!

Thankyou!!!

Alex

Was it helpful?

Solution

I came across a similar problem recently. I think what you need to do is enable your DIV to receive the focus. The answer to this question should help - essentially add a tabindex attribute to the DIV.

OTHER TIPS

onkeypress is only triggered for the 'active' field when a key is pressed.

The clue there is the word 'field' -- by default, <div> elements cannot become 'active'; only input fields.

You might get some joy by doing something like tabindex="-1" as an attribute in the <div>, but I can't guarantee it'll work, and I haven't tried it yet. Even then, you might have to manually setFocus() on the element.

(note credit for the last part of this answer comes from elsewhere on SO: Is it possible to focus on a <div> using javascript focus() function?)

I don't think you can use an onkeypress event on a div element as it's a container element rather than an input element.

If you place the onkeypress against the body as you previously described you can then read the value of the keypress to identify the div by id. Once you have the div you can then change the style / class as required.

Add tabindex="0" to your div. That will make it "focusable". Then the keypress event will work.

Working example of focus and key press: http://jsfiddle.net/nYLqA/ (click a box and press a key) (the change of color has been disabled)

If you use tabindex="-1", then you will have to click to focus it. If you use tabindex="0" then either a click or the tab key will let you focus to it.

Also if you use this route I recommend

  • Test it. Make sure it works in the browsers you care about (mostly test IE 7, not the same as 8/7 compatible)
  • Use onfocus and onblur instead of onclick to change your color. If you don't care about IE 7, you can use CSS :focus to change the color. (works like CSS :hover)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top