How do I set a variable with a keydown event?

Question

I have created a virtual keyboard as a project to learn, among other things, jQuery: http://brianfryer.1.ai/virtual-keyboard/index.html

When an on-screen key is clicked, its associated character is added to the textarea.

When a keyboard key is pressed, however, nothing happens -- the associated character should be added to the textarea.

The problem I'm having is with the clickedKey variable. Setting clickedKey to a static character (i.e., 'm') will produce the desired result (the character is added to the textarea), but I don't think creating a big block of code for each key is a very good idea.

$(document).ready(function() {

    // Find the textarea, and save it to var screen
    var screen = $("#screen > textarea");

    $('li').not('.modifier, .short-key').click(function() {
        // Find the first <span>, get the contents, trim away the whitespace, and save it to var txt
        var txt = $(this).find(':first-child').text().trim();
        // Add the trimmed txt to the textarea
        screen.val(screen.val() + txt);
    });

    var clickedKey = $(document).keydown( function(event){ String.fromCharCode(event.keyCode); });

    KeyboardJS.bind.key(
        // Physical keyboard input
        clickedKey,
        // onDownCallback
        function() {
            // Make the on-screen key flash
            $('#' + clickedKey).addClass('hover');
            // If the textarea has focus...
            if ($('#screen > textarea').is(':focus')) {
                // ...do nothing
            } else {
                // Add the trimmed txt from the first span to the textarea
                var txt = $('.keys').find('#' + clickedKey).children(':first').text().trim();
                screen.val(screen.val() + txt);
            }
        },
        function() {
            // After a key is clicked, remove the .hover class
            setTimeout(function() {
                $('.keys').find('#' + clickedKey).removeClass('hover');
            }, 100);
        }
    );

});

I'm using keyboard.js for key binding.

score 1 · Answer 1 · answered Sep 19 '12 at 05:35

Keyboard.js is meant to be used with js directly. You are trying to pass a jQuery event object to it and that's why it returns an error:

Object [object Object] has no method 'toLowerCase' - Keyboard.js

The solution would be to use just javascript to get the keypressed. I added this to your head: http://robertwhurst.github.com/KeyboardJS/demo.js

Add this to your body: <div class="demoReadout"></div>

That worked for me. Now you just need to hook the event to your jQuery from there. Hope that helps a bit.

Thank you! This certainly helped :-) – brianfryer Sep 19 '12 at 23:20 — brianfryer, Sep 19 '12 at 23:20

score 1 · Answer 2 · answered Sep 29 '12 at 23:27

1

I'm the author of KeyboardJS.

It might be helpful to get the key pressed via the activeKeys method. That way you get the exact name I use for the specific key and your binding will work.

clickedKey = KeyboardJS.activeKeys()[0];

answered Sep 29 '12 at 23:27

Robert Hurst

8,902
5
42
66

score 0 · Answer 3 · answered Sep 19 '12 at 23:22

Using an answer I found here (http://stackoverflow.com/a/2819568/1681875), I was able to put together the following (that works):

// "press" = you used your physical keyboard
// "clicked" = you used your mouse to click the on-screen keyboard

$(document).ready(function() {

// Find the textarea, save it to var screen, and focus the cursor on it
var screen = $("#screen > textarea");
screen.focus();

// Listen for when a (non-modifier, or non-function) key is clicked
$('li').not('.modifier, .short-key').click(function() {

    // Find the first <span>, get the contents, trim away the whitespace, and save it to var txt
    var character = $(this).find(':first-child').text().trim();

    // Extend jQuery to insert characters at the caret
    jQuery.fn.extend({
        insertAtCaret: function(character){
            return this.each(function(i) {
                if (document.selection) {
                    //For browsers like Internet Explorer
                    this.focus();
                    sel = document.selection.createRange();
                    sel.text = character;
                    this.focus();
                }
                else if (this.selectionStart || this.selectionStart == '0') {
                    //For browsers like Firefox and Webkit based
                    var startPos = this.selectionStart;
                    var endPos = this.selectionEnd;
                    var scrollTop = this.scrollTop;
                    this.value = this.value.substring(0, startPos)+character+this.value.substring(endPos,this.value.length);
                    this.focus();
                    this.selectionStart = startPos + character.length;
                    this.selectionEnd = startPos + character.length;
                    this.scrollTop = scrollTop;
                } else {
                    this.value += character;
                    this.focus();
                }
            })
        }
    });

    // Insert characters in the textarea at the current caret
    screen.insertAtCaret(character);
});

$(document).on({
    // Do this when a key is pressed
    'keydown': function(event){
        // Get the value of the key being pressed and make sure it's lower case
        key = (String.fromCharCode(event.keyCode)).toLowerCase();
        // Make the on-screen key flash for 100ms
        $('#' + key).addClass('hover');
        // Focus on the textarea
        $('#screen > textarea').focus();
    },
    // Do this when a key is let go
    'keyup': function(event) {
        // Get the value of the key being pressed
        key = String.fromCharCode(event.keyCode).toLowerCase();
        // After a key is clicked, remove the .hover class
        $('#' + key).removeClass('hover').delay(100);
     }
});

});

How do I set a variable with a keydown event?

3 Answers3