Adding keydown to click event

Question

Edit**

In my word game there is a grid with 3 letter words.

The aim of the game is to spell the words by clicking on the corresponding letters on the side.

When an area in the grid is highlighted it indicates to the user the word to spell. The user clicks the letters on the side of the grid and they move to the highlighted area.

When a letter is clicked it will animate to the corresponding area in the grid. I want to make it as user friendly as possible so I want to add "keyDown()" additionally so that when the user presses "a" it animates on the screen.

The letters are stored in the HTML like this

<div class="tiles-wrapper">

        <div id="drag1" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="a">
        <p>a</p>
        </div>

        <div id="drag2" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="b">
        <p>b</p>
        </div>

        <div id="drag3" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="c">
        <p>c</p>
        </div>

        <div id="drag4" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="d">
        <p>d</p>
        </div>

        <div id="drag5" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="e">
        <p>e</p>
        </div>

        <div id="drag6" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="f">
        <p>f</p>
        </div>

        <div id="drag7" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="g">
        <p>g</p>
        </div>

        <div id="drag8" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="h">
        <p>h</p>
        </div>

        <div id="drag9" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="i">
        <p>i</p>
        </div>

         <div id="drag10" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="j">
        <p>j</p>
        </div>

        <div id="drag11" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="k">
        <p>k</p>
        </div>

        <div id="drag12" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="l">
        <p>l</p>
        </div>

        <div id="drag13" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="m">
        <p>m</p>
        </div>

        <div id="drag14" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="n">
        <p>n</p>
        </div>

        <div id="drag15" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="o">
        <p>o</p>
        </div>

        <div id="drag16" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="p">
        <p>p</p>
        </div>

        <div id="drag17" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="q">
        <p>q</p>
        </div>

        <div id="drag18" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="r">
        <p>r</p>
        </div>

        <div id="drag19" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="s">
        <p>s</p>
        </div>

        <div id="drag20" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="t">
        <p>t</p>
        </div>

        <div id="drag21" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="u">
        <p>u</p>
        </div>

        <div id="drag22" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="v">
        <p>v</p>
        </div>

        <div id="drag23" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="w">
        <p>w</p>
        </div>

        <div id="drag24" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="x">
        <p>x</p>
        </div>

        <div id="drag25" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="y">
        <p>y</p>
        </div>

        <div id="drag26" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="z">
        <p>z</p>
        </div>

I have have some of the script but I don't know how to link it up

$(document).keypress(function(e){  

        if (e.which >= 97 && e.which <= 122) {  
              animateDrag(String.fromCharCode(e.which));  
    } 

});

http://jsfiddle.net/smilburn/Dxxmh/88/

your fiddle only shows a button, when pressed nothing happens.. — Nelson Benítez León
– Nelson Benítez León, Commented Nov 1, 2012 at 11:42

Nelson Benítez León · Accepted Answer · 2012-11-01 12:38:49Z

1

You can do it by triggering a click event on the appropiate letter div, like so:

$(document).keypress(function(e){ 
            if (e.which >= 97 && e.which <= 122) {  
                  letter = String.fromCharCode(e.which);
                  $(".drag[data-letter='"+letter+"']").trigger('click');
            }

});

See working demo

answered Nov 1, 2012 at 12:38

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Milo-J Over a year ago

That great nelson thanks. I don't suppose you could tell me why the class complete-word isn't applied to right place @Nelson

Nelson Benítez León Over a year ago

That's kind of offtopic, you should open another answerc, anyway I search the fiddle for 'complete' string and didn't find any match, you don't have anything called 'complete' in the fiddle you posted.

Milo-J Over a year ago

I meant to say right-word. I want it to be added to the <td> @Nelson

ilan berci · Accepted Answer · 2012-11-01 12:38:34Z

0

$().ready(function() {
   $('div.player-tiles, div.player-tiles2').keypress(function(e) {
      if (e.which >= 97 && e.which <= 122) {  
          animateDrag(String.fromCharCode(e.which));  
      } 
   })
})

answered Nov 1, 2012 at 12:38

ilan berci

3,8791 gold badge18 silver badges21 bronze badges

1 Comment

brimborium Over a year ago

You shouldn't just give code but also some explanation to the code.

Collectives™ on Stack Overflow

Adding keydown to click event

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related