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

[Bruno Batista 3]

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);
    });
});

[Vini_Aviva 13]

Nunca concegui com input =/... realmente nao sei te ajudar, Tenta fazer uma gambiarra tranformando um textarea em um input =D.

[Bruno Batista 3]

Nunca concegui com input =/... realmente nao sei te ajudar, Tenta fazer uma gambiarra tranformando um textarea em um input =D.

 

Opa obrigado, um amigo Fernando da Projete Web conseguiu resolver!

 

O problema estava no JavaScript.

 

$(function(){
    var $write = $('#write'),
        capslock = false;
    
    $('#keyboard li').click(function(){
        var $this = $(this),
            character = $this.text(); // 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.val();
            
            $write.val(html.substr(0, html.length - 1));
            return false;
        }
        
        // Special characters
        if ($this.hasClass('symbol')) character = $('span:visible', $this).text();
        
        // Uppercase letter
        if ($this.hasClass('uppercase')) character = character.toUpperCase();
        
        // Add the character
        $write.val($write.val() + character);
    });
});

Obrigado Fernando!

[Fernando Miranda 0]

Opa de nada Bruno, precisando estamos ai!

 

Abraço

[William Bruno 1501]

fiz um bem simples, sem usar jquery:

http://code.imasters.com.br/index.php?/topic/158-teclado-virtual-javascript/

 

^_^