JQuery Keyboard populate input instead of textarea?

Question

Im currently working on a project for a time keeping system where the employee can walk up to a touch screen computer (or tablet) punch in his or hers 4 digit employee number and clock in.

Now I'm not very good with JQuery, so I've found this tutorial on how to create a JQuery keyboard the populates a TextArea field when a button is pressed.

This has worked great for me and I have been able to achieve what I want by using the tutorial with some php to handle the form.

The problem I am having is that the JQuery keyboard populates a textarea and I really need it to populate a input field. It seems like this should be a fairly simple thing to change but I can't for the life of me figure it out.

My HTML Form

<form action="index.php" method="post">
<textarea id="write" name="code" rows="6" cols="60"></textarea>

<ul id="keyboard">
    <li class="symbol"><span class="off">1</span></li>
    <li class="symbol"><span class="off">2</span></li>
    <li class="symbol"><span class="off">3</span></li><br /><br /><br />
    <li class="symbol"><span class="off">4</span></li>
    <li class="symbol"><span class="off">5</span></li>
    <li class="symbol"><span class="off">6</span></li><br /><br /><br />
    <li class="symbol"><span class="off">7</span></li>
    <li class="symbol"><span class="off">8</span></li>
    <li class="symbol"><span class="off">9</span></li><br /><br /><br />
    <li class="symbol-zero"><span class="off">0</span></li>
    <li class="delete">Clear</li>
</ul>
        <input class="submit-in" type="submit" name="clock" value="In">
        <input class="submit-out" type="submit" name="clock" value="Out">

</form>

The JQuery for the keyboard

$(function(){
var $write = $('#write'),
    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



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

        $write.html(html.substr(0, html.length - 999));
        return false;
    }

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



    // Add the character

    $write.html($write.html() + character); }); });

Any help would be really appreciated, like i said I'm a noob when it comes to JQuery and I'm hoping that there is a quick and easy solution.

Thanks all.

Answer 1

Change <textarea id="write" name="code" rows="6" cols="60"></textarea> to <input type="text" id="write" name="code" />

Replace all instances of $write.html with $write.val

Answer 2

The text inside a input field is not html, so you can't assign it with .html(), to populate the input field with your text you should change

 $write.html($write.html() + character);

to this.

$write.attr('value', $write.attr('value') + character);

Or simply use .val() as previous poster stated, it's the jQuery way.