Question

I’m using a slightly augmented virtual keyboard from this tutorial:

http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/

The Jquery:

$(function(){
var $write2 = $('#write2'),
    shift = false,
    capslock = false;

$('#keyboard li').click(function(){
    var $this = $(this),
        character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

    // Shift keys
    if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
        $('.letter').toggleClass('uppercase');
        $('.symbol span').toggle();

        shift = (shift === true) ? false : true;
        capslock = false;
        return false;
    }

    // Caps lock
    if ($this.hasClass('capslock')) {
        $('.letter').toggleClass('uppercase');
        capslock = true;
        return false;
    }

    // Delete
    if ($this.hasClass('delete')) {
        var html = $write2.html();

        $write2.html(html.substr(0, html.length - 1000));
        return false;
    }

    // Special characters
    if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
    if ($this.hasClass('space')) character = $('span:visible', $this).html();
    if ($this.hasClass('tab')) character = $('span:visible', $this).html();
    if ($this.hasClass('return')) character = "\n";

    // Uppercase letter
    if ($this.hasClass('uppercase')) character = character.toUpperCase();

    // Remove shift once a key is clicked.
    if (shift === true) {
        $('.symbol span').toggle();
        if (capslock === false) $('.letter').toggleClass('uppercase');

        shift = false;
    }

    // Add the character
    $write2.html(character+ "  " + $write2.html());
    }); });

The problem is, when I manually change the textarea, the keyboard gets disabled. I’m not really sure why and the tutorial didn’t really explain that bug.

Thanks.

Answer 1

try using val instead of html

$write.val($write.val() + character)