Jump to content
Sir Pereira

Teclado Virtual

Recommended Posts

Sir Pereira

Boas pessoal,

estou aqui com uns problemas.

Estou a fazer uma plataforma, que apenas será controlada por um monitor touch-screen, como tal já na parte inicial, vou ter de colocar um teclado virtual que permita a autentificação, neste caso apenas o NumPad.

O mesmo já está desenhado e a funcionar, recorrendo a estes dois códigos - original e adaptação:

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

http://forum.imasters.com.br/index.php?/topic/412383-teclado-virtual-jquery-nao-funciona-em-input/

http://d2o0t5hpnwv4c1.cloudfront.net/378_jqueryKeyboard/demo/index.html (demo)

O problema agora é, o código em questão:

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

Apenas vai permitir a inserção numa determinada div especificada no código, e eu queria que fosse possível a inserção dentro do input com focus, independente de estar especificado ou não, ou até, caso não seja possível, poder alternar entre o focus de duas:

- O ID de utilizador

- Password

ambos numéricos.

Alguém capaz de dar uma ajudinha ? ;)

Abraço

Share this post


Link to post
Share on other sites
Sir Pereira

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

Tentei alterar para isto mas escreve nos dois inputs o mesmo.

Não sou grande mestre nisto, agradecia uma ajudinha  😳

Share this post


Link to post
Share on other sites
Rechousa

$(":text:visible:enabled:first").focus();

Fonte:

http://iamjosh.wordpress.com/2008/03/10/jquery-focus-on-first-form-element/

PS:

Tal como descrito na fonte, há uma situação em que não funciona, que é quando tens o primeiro controlo activo está dentro de uma div escondida, exemplo:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
    $(":text:visible:enabled:first").focus();
});
</script>
<input type="text" id="a" value="1" disabled="disabled" />
<input type="text" id="b" value="2" style="display: none" />
<div style="visibility: hidden">
<input type="text" id="c" value="3" />
</div>
<input type="text" id="d" value="4" />

Se não tiveres essa situação, podes usar esse CodeSnippet, que já vai para o meu arquivo  :(


Pedro Martins

Sharing is Knowledge!

http://www.linkedin.com/in/rechousa

Share this post


Link to post
Share on other sites
Sir Pereira

Bom, tenho andado aqui às voltas com isto e não consigo.

@yoda: já te tinha dito que não pode ser com um input exclusivo definido por um id.

Isto é o formulário em questão:

http://img836.imageshack.us/img836/7461/ident.png

Código do formulário:

                <form action="auth.php" method="post" >
                    <label for="id">identificação</label>
                    <input type="text" id="id" name="id" onkeypress="return isNumberKey(event)" required autofocus ></input>
                        <script type="text/javascript">
                            if (!("autofocus" in document.createElement("input"))) {
                            document.getElementById("id").focus();
                            }
                        </script>
                    <label for="pwd">palavra-chave</label>
                    <input type="password" id="pwd" name="pwd"></input>
                    <input type="image" src="imgs/entrar.png" class="entrar"></input>
                </form>
 

Já tentei sem os focus ali:

                <form action="auth.php" method="post" >
                    <label for="id">identificação</label>
                    <input type="text" id="id" name="id" onkeypress="return isNumberKey(event)"></input>
                    <label for="pwd">palavra-chave</label>
                    <input type="password" id="pwd" name="pwd"></input>
                    <input type="image" src="imgs/entrar.png" class="entrar"></input>
                </form>
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.