Teclado Virtual Simple con JavaScript


Esta es una forma simple de poder crear un teclado virtual con JavaScript y llamarlo desde una pagina JSP, esto a pedido de un compañero que lo necesitaba :).

Ya saben lo primero es crear un proyecto web desde Netbeans y agregamos un archivos JavaScript y escribimos el siguiente código

Teclado.js

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

function AsignaValor(Nombre,Valor){
    var Campo = document.getElementById(Nombre);
    if(Valor==""){
        Campo.value="";
    }else{
        if(Campo.value!=""){
            Campo.value = Campo.value + Valor;
        }else{
            Campo.value = Valor;
        }
    }
}

function randOrd(){
    return (Math.round(Math.random())-0.5);
}

function marcador(Div,Nombre){
    var resultado = "";
    var num  = new Array('1','2','3','4','5','6','7','8','9','0');
    var key  = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
    num.sort(randOrd);
    key.sort(randOrd);
    resultado = "<table cellpadding='1' cellspacing='1' width='100'>";
    var ini = 0;
    var fin = 10;
    resultado += "<tr bgcolor='#F0F7FD'>";
    for ( var n=0; n<10; ++n ){
        resultado += "<td align='center'><input type='button' onclick=\"AsignaValor('"+Nombre+"','"+num[n]+"')\" value=" + num[n] + " class='button_key'></td>";
    }
    resultado += "</tr>";
    for ( var i=0; i<3; ++i ){
        resultado += "<tr bgcolor='#F0F7FD'>";
        for ( var j=ini; j<fin; ++j ){
            resultado += "<td align='center'><input type='button' onclick=\"AsignaValor('"+Nombre+"','"+key[j]+"')\" value=" + key[j] + " class='button_key'></td>";
        }
        if(j<20){
            ini = j;
            fin = ini + 10;
        }else if(j==20){
            ini = j;
            fin = ini + 6;
        }else if(j==26){
            resultado += "<td bgcolor='#1C5280' colspan='4' align='center' style='cursor:pointer;' onclick=\"AsignaValor('"+Nombre+"','')\" class='Button'><strong>Limpiar</strong></td>";
        }
        resultado += "</tr>";
    }
    resultado += "</table><br>";
    document.getElementById(Div).innerHTML=resultado;
}

Ahora para poder llamarlo desde una página jsp solo tendriamos el siguiente código
index.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Estilos.css">
        <Script language="JavaScript" type="text/javascript" src="Teclado.js"></Script>
    </head>
    <body onload="marcador('contenedor','campo_clave');">
        <div align="center" valing="center"><br><br>
            <table cellpadding="2" cellspacing="0">
                <tr>
                    <td>Clave de Acceso</td>
                </tr>
                <tr>
                    <td><input type="password" id="campo_clave" style="width:150px" readonly="true" class="caja_secure" /></td>
                </tr>
                <tr>
                    <td align="center">
                        <div id="contenedor"></div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

y de esta manera estariamos creando un teclado virtual básico y que puede servir para manejar password como podemos observar en la imagen.

Obviamente esto puede mejorarse, pero ya esta propuesto, descarga el codigo aquí

Anuncios

8 thoughts on “Teclado Virtual Simple con JavaScript

  1. Esta muy bueno tu teclado pero el link no funciona :(, podrias volverlo a subir, me interesa mucho el poder utilizar y mejorar el teclado.
    Gracias

  2. Disculpa como podrías hacer para que el mismo teclado puedas utilizarlo en 3 textbox en una misma pantalla; me explico….Quiero utilizar el teclado para hacer jsp que permita cambiar la contraseña, entonces en un tbox quiero que utilizando el teclado virtual se ingrese la contraseña anterior, luego en el otro tbox ingresar la nueva contraseña y en el tercer tbox que se confirme la nueva contraseña….por favor y gracias por la ayuda!

  3. Hola Jose, disculpa la demora al contestar, pues si te sirve todavia podrias hacer esto en la parte del body:

    <body onload="marcador('pass_ant','pass_ante'); 
    marcador('pass_new','pass_new');
    marcador('pass_new_re','pass_new_re')">

    y en la parte de tus inputs tendrias algo asi:

    <table cellpadding="2" cellspacing="0">
    <tr>
    <td>Ingrese Password Anterior</td>
    </tr>
    <tr>
    <td><input type="password" id="pass_ante" style="width:150px" readonly="true" class="caja_secure" /></td>
    </tr>
    <tr>
    <td align="center">
    <div id="pass_ante"></div>
    </td>
    </tr>
    </table>
    <table cellpadding="2" cellspacing="0">
    <tr>
    <td>Ingrese nuevo password</td>
    </tr>
    <tr>
    <td><input type="password" id="pass_new" style="width:150px" readonly="true" class="caja_secure" /></td>
    </tr>
    <tr>
    <td align="center">
    <div id="pass_new"></div>
    </td>
    </tr>
    </table>

    <table cellpadding="2" cellspacing="0">
    <tr>
    <td>Confirme su nuevo password</td>
    </tr>
    <tr>
    <td><input type="password" id="pass_new_re" style="width:150px" readonly="true" class="caja_secure" /></td>
    </tr>
    <tr>
    <td align="center">
    <div id="pass_new_re"></div>
    </td>
    </tr>
    </table>

    Espero te sirva.

    Saludos.

  4. nachxs :

    Hola Jose, disculpa la demora al contestar, pues si te sirve todavia podrias hacer esto en la parte del body:

    <body onload="marcador('pass_ant','pass_ant'); 
    marcador('pass_new','pass_new'); 
    marcador('pass_new_re','pass_new_re')">
    

    y en la parte de tus inputs tendrias algo asi:

    <table cellpadding="2" cellspacing="0">
                   <tr>
                       <td>Ingrese Password Anterior</td>
                   </tr>
                   <tr>
                       <td><input type="password" id="pass_ante" style="width:150px" readonly="true" class="caja_secure" /></td>
                   </tr>
                   <tr>
                       <td align="center">
                           <div id="pass_ante"></div>
                       </td>
                   </tr>
               </table>
    <table cellpadding="2" cellspacing="0">
                   <tr>
                       <td>Ingrese nuevo password</td>
                   </tr>
                   <tr>
                       <td><input type="password" id="pass_new" style="width:150px" readonly="true" class="caja_secure" /></td>
                   </tr>
                   <tr>
                       <td align="center">
                           <div id="pass_new"></div>
                       </td>
                   </tr>
               </table>
    
    <table cellpadding="2" cellspacing="0">
                   <tr>
                       <td>Confirme su nuevo password</td>
                   </tr>
                   <tr>
                       <td><input type="password" id="pass_new_re" style="width:150px" readonly="true" class="caja_secure" /></td>
                   </tr>
                   <tr>
                       <td align="center">
                           <div id="pass_new_re"></div>
                       </td>
                   </tr>
               </table>
    

    Espero te sirva.

    Saludos.

  5. Buenas noches amigo copio los codigos textualmente y no me corre tengo q copiar todo textualmente? no se mucho de java pero quiero hacer una pagina con el teclado pero parecido como los del banco que cuando uno pase el raton por encima de los numeros estos cambien sin teclear a (*) asteriscos me podrias ayudar por favor! sabes también uso un programa que crea facilmente paginas web q es una pagina q se llama wix.com y por ai meto los codigos xq los acepta! pero esos no ! espero tu respuesta salu2

  6. Hola me interesa mucho esto pero no podrias documentar los pasar para entender mejor
    como lo has elaborado. Porfavor necesito que expliques como lo has elaborado

  7. Hola nachxs, yo estoy utulizando tu codigo, pero ahora quisiera saber como puedo poner una imagen a casa casillero? muchas gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s