[Resolvido] Teclado virtual jQuery não funciona em "input&#34

Olá a todos,

Estou trabalhando neste codigo abaixo, é um teclado virtual simples. Ele funciona perfeitamente com textarea, mas preciso que funcione da mesma forma com input para criar um campo senha!

Alguem pode me ajduar? Desde já agradeço!

DEMO: Clique aqui

<div id="container">
 <textarea id="write" type="password" value="" name="password"></textarea>
 <ul id="keyboard">
 <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
 <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
 <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
 <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
 <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
 <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
 <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
 <li class="symbol"><span class="off">7</span><span class="on">&</span></li>
 <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
 <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
 <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
 <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
 <li class="symbol lastitem"><span class="off">=</span><span class="on">+</span></li>
 <li class="letter">q</li>
 <li class="letter">w</li>
 <li class="letter">e</li>
 <li class="letter">r</li>
 <li class="letter">t</li>
 <li class="letter">y</li>
 <li class="letter">u</li>
 <li class="letter">i</li>
 <li class="letter">o</li>
 <li class="letter">p</li>
 <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
 <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
 <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
 <li class="letter">a</li>
 <li class="letter">s</li>
 <li class="letter">d</li>
 <li class="letter">f</li>
 <li class="letter">g</li>
 <li class="letter">h</li>
 <li class="letter">j</li>
 <li class="letter">k</li>
 <li class="letter">l</li>
 <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
 <li class="symbol"><span class="off">'</span><span class="on">"</span></li>
 <li class="letter">z</li>
 <li class="letter lastitem">x</li>
 <li class="capslock">caps lock</li>
 <li class="letter">c</li>
 <li class="letter">v</li>
 <li class="letter">b</li>
 <li class="letter">n</li>
 <li class="letter">m</li>
 <li class="symbol"><span class="off">,</span><span class="on"><</span></li>
 <li class="symbol"><span class="off">.</span><span class="on">></span></li>
 <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
 <li class="delete lastitem">deletar</li>
 </ul>
</div>

* {

 margin: 0;
 padding: 0;
}

body {

 font: 71%/1.5 Verdana, Sans-Serif;
 background: #eee;
}
#container {
 margin: 100px auto;
 width: 350px;
}
#write {
 margin: 0 0 5px;
 padding: 5px;
 font: 1em/1.5 Verdana, Sans-Serif;
 background: #fff;
 border: 1px solid #f9f9f9;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
#keyboard {
 margin: 0;
 padding: 0;
 list-style: none;
}

#keyboard li {

 float: left;
 margin: 0 5px 5px 0;
 width: 20px;
 height: 20px;
 line-height: 20px;
 text-align: center;
 background: #fff;
 border: 1px solid #f9f9f9;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

#keyboard li:hover {

 position: relative;
 top: 1px;
 left: 1px;
 border-color: #e5e5e5;
 cursor: pointer;
}

#keyboard .delete {

 width: 47px;
}

#keyboard .capslock {

 width: 74px;
}
.capslock {
 clear: left;
}
.lastitem {
 margin-right: 0 !important;
}
.uppercase {
 text-transform: uppercase;
}
.on {
 display: none;
}

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

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

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

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

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

 // Special characters
 if ($this.hasClass('symbol')) character = $('span:visible', $this).html();

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

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