estoy haciendo un teclado virtual para evitar los keyloggers, y necesito saber komo dirigir las teclas hacia los campos usuario y contraseña, es decir, un poco de javascript para calentar motores, ya que estoy un poco atascado a la hora de EJEMPLO: seleccionar el campo "usuario" y luego elcampo "contraseña", es decir seleccionarlos con el raton y que se pueda escribir desde el teclado virtual, que hasta ahora escribo pero nose cambiar del campo "text" al campo "password", eso es....
<?php
session_start();
session_destroy();
$_SESSION['usuario1'] = "";
$_SESSION['contrasena'] = "";
?>
<html>
<head>
<meta http-equiv='last-modified' content='0'>
<meta http-equiv='cache-Control' content='no-cache, mustrevalidate'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='expires' content='-1'>
<meta charset="utf-8">
<title>Tecasoft.com | Area de clientes</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />
<link rel="StyleSheet" type="text/css" href="http://www.tecasoft.com/css/estilos.css">
</head>
<body>
<div id="contenedor">
<center>
<div id="cabecera">
<div id="logo">
<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
</div>
<div id="anexo">
<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Español (Cambiar ▼)</a>
</div>
</div>
<!-- Menu navegador -->
<div id="navegador">
</div>
<!-- El contenido central -->
<div id="contenido">
<h1 class="naranja">Inicie Sesión</h1>
<form action="login.php" method="post" name="form1">
<label for="usuario">Usuario:</label>
<input type="text" name="usuario" id="usuario" class="text ui-widget-content ui-corner-all" readonly>
<label for="contrasena">Contraseña:</label>
<input type="password" name="contrasena" id="contrasena" class="text ui-widget-content ui-corner-all"><br><br>
<input type="button" class="boton" id="1" value="1">
<input type="button" class="boton" id="2" value="2">
<input type="button" class="boton" id="3" value="3">
<input type="button" class="boton" id="4" value="4">
<input type="button" class="boton" id="5" value="5">
<input type="button" class="boton" id="6" value="6">
<input type="button" class="boton" id="7" value="7">
<input type="button" class="boton" id="8" value="8">
<input type="button" class="boton" id="9" value="9">
<input type="button" class="boton" id="0" value="0">
<br>
<!-- Cambia a mayusculas y minusculas -->
<input type="button" class="boton" value="Bloq.Mayus">
<!-- End -->
<input type="button" class="boton" value="Q">
<input type="button" class="boton" value="W">
<input type="button" class="boton" value="E">
<input type="button" class="boton" value="R">
<input type="button" class="boton" value="T">
<input type="button" class="boton" value="Y">
<input type="button" class="boton" value="U">
<input type="button" class="boton" value="I">
<input type="button" class="boton" value="O">
<input type="button" class="boton" value="P">
<br>
<input type="button" class="boton" value="A">
<input type="button" class="boton" value="S">
<input type="button" class="boton" value="D">
<input type="button" class="boton" value="F">
<input type="button" class="boton" value="G">
<input type="button" class="boton" value="H">
<input type="button" class="boton" value="J">
<input type="button" class="boton" value="K">
<input type="button" class="boton" value="L">
<input type="button" class="boton" value="Ñ">
<br>
<input type="button" class="boton" value="Z">
<input type="button" class="boton" value="X">
<input type="button" class="boton" value="C">
<input type="button" class="boton" value="V">
<input type="button" class="boton" value="B">
<input type="button" class="boton" value="N">
<input type="button" class="boton" value="M">
<input type="button" class="boton" value="-">
<input type="button" class="boton" value="_">
<input type="button" class="boton" value="@">
<input type="button" class="boton" value="#">
<br><br>
<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
<input type="submit" class="boton" value="Iniciar sesión">
</form>
</div>
<!-- Pie Pagina -->
<div id="pie">
<hr>
<div id="pie-izq">
<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal | </a>
<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos | </a>
<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte | </a>
<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web | </a>
<span class="pie-izq">Rotacion soporte: | </span>
<span class="pie-izq">Hora: </span>
</div>
<div id="pie-der">
<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
</div>
<br><br>
</div>
</center>
</div>
<script type="text/javascript" >
$(".boton").button();
</script>
<script type="text/javascript" >
$("input#1").click(function(){
document.form1.usuario.value=document.form1.usuario.value+1;
});
$("input#2").click(function(){
document.form1.usuario.value=document.form1.usuario.value+2;
});
</script>
</body>
</html>
x cierto me faltan las minusculas pero no me importa de momento*, muchas gracias x contestar
Interesante. Cuando haga mi pagina web pondré esto seguro.
Porque no examinas el teclado que ofrecen los bancos?
Te dejo un link que tiene teclado virtual implementado con JS: https://www.accessbanking.com.ar/RetailHomeBankingWeb/access.do (https://www.accessbanking.com.ar/RetailHomeBankingWeb/access.do)
Hay varios .js que estan trabajando, pero parece estar bastante modularizado.
Saludos!
estoy buscando en la web y no encuentro nada, es mucho codigo, hecharme una mano por favor
Fijate teclado.js (https://www.accessbanking.com.ar/bkb/js/teclado.js (https://www.accessbanking.com.ar/bkb/js/teclado.js))
Luego es custeion de seguir analizando el codigo...
Saludos!
PD: Opera trae incorporado un analizador de los elemtnos de la pagina. Seguro que hay algo parecido para otros navegadores, pero uso Opera solamente.
ya lo examine y no encuentro nada para que me bloquee el teclado fisico
Creo que la idea no es bloquear el teclado fisico (no creo que desde un navegador lo puedas hacer) sino permitirle al usuario ingresar texto sin usar el mismo.
No se mucho JS, pero se me ocurre que cada vez que un texto sea modificado usando el teclado, se podria borrar el mismo, con lo que obtendria una especie de "bloqueo".
y como hago eso, es decir para bloquearlo, afectaria algo al usuario¿?
encontre esta chapucilla que no me soluciona nada
<script language="javascript">function tecla(){alert('EL TECLADO BLOQUEADO')}; document.onkeydown=tecla;</script>
si que tal si no es un input type=text sino simplemente un cuadrado que se le van dibujando letras con el teclado virtual, y la info la almacene en una variable en js o en un input hidden
solo es una idea
Cita de: tecasoft en 5 Marzo 2013, 23:39 PM
y como hago eso, es decir para bloquearlo, afectaria algo al usuario¿?
Afectaria en que no podria ingresar texto usando el teclado normal.
Fijate este link: http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery (http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery)
Cita de: daryo en 5 Marzo 2013, 23:43 PM
si que tal si no es un input type=text sino simplemente un cuadrado que se le van dibujando letras con el teclado virtual, y la info la almacene en una variable en js o en un input hidden
solo es una idea
Y muy buena, por cierto!
Como te dije antes, mis conocimientos son en programacion general, no en JS. Hay mucho que no conozco sobre el tema...
Saludos!
siento ser tan torpe me lo podrias explicar lo del link, es que soy un poco patosillo con JS
https://github.com/Mottie/Keyboard
Demo
http://mottie.github.com/Keyboard/index.html
Hablan de 'dibujar' tu contraseña e interpretarlo con js ? o entendi mal
A ver, volviendo al tema, estuve mirando un poco de codigo JS y encontre que, por ej., en TU codigo tienes:
<input type="button" class="boton" value="#">
Si cambias esa linea por
<input type="button" class="boton" value="#" onclick="tecla(this.value)">
Fijate que solo agrega la parte de "onclick..."
Y ademas agregas la siguiente función:
<script type="text/javascript">
function tecla(valor){
document.forms["form1"]["usuario"].value += valor;
}
</script>
Veras que cada vez que presionas el boton, se copia el valor del parametro "value" en el texto dado (en este caso "usuario").
Si agregas el codigo "onclick..." a todos los botones (el mismo codigo funcina para todos), podras escribir en el texto sin usar el teclado.
De todas formas, lo que estoy poniendo, sale de una busuqeda en Google: http://www.google.com.ar/search?q=how+to+create+a+virtual+keyboard+using+javascript&ie=utf-8&oe=utf-8 (http://www.google.com.ar/search?q=how+to+create+a+virtual+keyboard+using+javascript&ie=utf-8&oe=utf-8)
y para seleccionar el campo usuario y password y que escriban como lo hago e probado con esto pero no da resultado:
<?php
session_start();
session_destroy();
$_SESSION['usuario1'] = "";
$_SESSION['contrasena'] = "";
?>
<html>
<head>
<meta http-equiv='last-modified' content='0'>
<meta http-equiv='cache-Control' content='no-cache, mustrevalidate'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='expires' content='-1'>
<meta charset="utf-8">
<title>Tecasoft.com | Area de clientes</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />
<link rel="StyleSheet" type="text/css" href="http://www.tecasoft.com/css/estilos.css">
<!--<script language="javascript">
function tecla(){
document.form1.contrasena.value="";
}
document.onkeydown=tecla;
</script>-->
</head>
<body>
<div id="contenedor">
<center>
<div id="cabecera">
<div id="logo">
<a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
</div>
<div id="anexo">
<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Español (Cambiar ▼)</a>
</div>
</div>
<!-- Menu navegador -->
<div id="navegador">
</div>
<!-- El contenido central -->
<div id="contenido">
<h1 class="naranja">Inicie Sesión</h1>
<form action="login.php" method="post" name="form1">
<label for="usuario">Usuario:</label>
<input type="text" name="usuario" id="usuario" maxlength="15" class="text ui-widget-content ui-corner-all">
<label for="contrasena">Contraseña:</label>
<input type="password" name="contrasena" id="contrasena" maxlength="15" class="text ui-widget-content ui-corner-all"><br><br>
<input type="button" class="boton" id="1" value="1" onclick="tecla(this.value)">
<input type="button" class="boton" id="2" value="2" onclick="tecla(this.value)">
<input type="button" class="boton" id="3" value="3" onclick="tecla(this.value)">
<input type="button" class="boton" id="4" value="4">
<input type="button" class="boton" id="5" value="5">
<input type="button" class="boton" id="6" value="6">
<input type="button" class="boton" id="7" value="7">
<input type="button" class="boton" id="8" value="8">
<input type="button" class="boton" id="9" value="9">
<input type="button" class="boton" id="0" value="0">
<br>
<!-- Cambia a mayusculas y minusculas -->
<input type="button" class="boton" value="Bloq.Mayus">
<!-- End -->
<input type="button" class="boton" value="Q">
<input type="button" class="boton" value="W">
<input type="button" class="boton" value="E">
<input type="button" class="boton" value="R">
<input type="button" class="boton" value="T">
<input type="button" class="boton" value="Y">
<input type="button" class="boton" value="U">
<input type="button" class="boton" value="I">
<input type="button" class="boton" value="O">
<input type="button" class="boton" value="P">
<br>
<input type="button" class="boton" value="A">
<input type="button" class="boton" value="S">
<input type="button" class="boton" value="D">
<input type="button" class="boton" value="F">
<input type="button" class="boton" value="G">
<input type="button" class="boton" value="H">
<input type="button" class="boton" value="J">
<input type="button" class="boton" value="K">
<input type="button" class="boton" value="L">
<input type="button" class="boton" value="Ñ">
<br>
<input type="button" class="boton" value="Z">
<input type="button" class="boton" value="X">
<input type="button" class="boton" value="C">
<input type="button" class="boton" value="V">
<input type="button" class="boton" value="B">
<input type="button" class="boton" value="N">
<input type="button" class="boton" value="M">
<input type="button" class="boton" value="-">
<input type="button" class="boton" value="_">
<input type="button" class="boton" value="@">
<input type="button" class="boton" value="#">
<br><br>
<a href="" class="anexo">¿Has olvidado tu contraseña?</a>
<input type="submit" class="boton" value="Iniciar sesión">
</form>
</div>
<!-- Pie Pagina -->
<div id="pie">
<hr>
<div id="pie-izq">
<a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal | </a>
<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos | </a>
<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte | </a>
<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web | </a>
<span class="pie-izq">Rotacion soporte: | </span>
<span class="pie-izq">Hora: </span>
</div>
<div id="pie-der">
<a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
</div>
<br><br>
</div>
</center>
</div>
<script type="text/javascript" >
$(".boton").button();
</script>
<script type="text/javascript">
$("input#usuario").select(function(){
function tecla(valor){
document.forms["form1"]["usuario"].value += valor;
}
});
$("input#contrasena").select(function(){
function tecla(valor){
document.forms["form1"]["contrasena"].value += valor;
}
});
</script>
</body>
</html>