teclado virtual para evitar los keyloggers

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....

Código:

<?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>
		&nbsp;&nbsp;&nbsp;
		<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>
		&nbsp;&nbsp;&nbsp;		
		<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 &nbsp;|&nbsp;</a> 
		<a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
		<a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
		<a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
		<span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</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