problemas con teclado virtual y jquery!! ayuda x favor

tecasoft · 13 Marzo 2013, 21:31 PM

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">
		&nbsp;&nbsp;&nbsp;
		<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>
		&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#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>

Zinc · 14 Marzo 2013, 00:41 AM

Hola,

Podrías darnos más información sobre lo que querés hacer?.

Saludos!

tecasoft · 14 Marzo 2013, 22:02 PM

pues mira quiero hacer un teclado virtual para que se pueda introducir datos en los campos "usuario" y "contrasena" si me puedes hechar una mano con el nuevo codigo. Lo encontre en una web y me cambia de minusculas a mayusculas las teclas pero no escribe en los campos ni nada no lo consigo, mi pregunta es hacer que me escriba el teclado SIMPLEMENTE nose explicarme mejor x ejemplo k me dijeras como hacer funcionar la tecla delete*:

Código [Seleccionar]


<?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">

<style>
* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#contenido {
margin: 100px auto;
width: 688px;
}
#usuario {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#form1 {
margin: 0;
padding: 0;
list-style: none;
}
	#form1 li {
	float: left;
	margin: 0 5px 5px 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #f9f9f9;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
		.capslock, .tab, .left-shift {
		clear: left;
		}
			#form1 .tab, #form1 .delete {
			width: 70px;
			}
			#form1 .capslock {
			width: 80px;
			}
			#form1 .return {
			width: 77px;
			}
			#form1 .left-shift {
			width: 95px;
			}
			#form1 .right-shift {
			width: 109px;
			}
		.lastitem {
		margin-right: 0;
		}
		.uppercase {
		text-transform: uppercase;
		}
		#form1 .space {
		clear: left;
		width: 681px;
		}
		.on {
		display: none;
		}
		#form1 li:hover {
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #e5e5e5;
		cursor: pointer;
		}
</style>
<!--<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">
		&nbsp;&nbsp;&nbsp;
		<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">
		
		<li type="button" class="delete lastitem">delete</li>
		<br>

<!-- Cambia a mayusculas y minusculas -->
		<li class="capslock">Bloq.Mayus</li>
<!-- End -->

		<li class="letter">q</li>
		<input type="button" class="letter" value="w">
		<input type="button" class="letter" value="e">
		<input type="button" class="letter" value="r">
		<input type="button" class="letter" value="t">
		<input type="button" class="letter" value="y">
		<input type="button" class="letter" value="u">
		<input type="button" class="letter" value="i">
		<input type="button" class="letter" value="o">
		<input type="button" class="letter" value="p">
		<br>
		<input type="button" class="letter" value="a">
		<input type="button" class="letter" value="s">
		<input type="button" class="letter" value="d">
		<input type="button" class="letter" value="f">
		<input type="button" class="letter" value="g">
		<input type="button" class="letter" value="h">
		<input type="button" class="letter" value="j">
		<input type="button" class="letter" value="k">
		<input type="button" class="letter" value="l">
		<input type="button" class="letter" value="ñ">
		<br>
		<input type="button" class="letter" value="z">
		<input type="button" class="letter" value="x">
		<input type="button" class="letter" value="c">
		<input type="button" class="letter" value="v">
		<input type="button" class="letter" value="b">
		<input type="button" class="letter" value="n">
		<input type="button" class="letter" 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();
$(".capslock").button();
$(".letter").button();
$(".delete").button();

$(function(){
	var $usuario = $('#usuario'),
		shift = false,
		capslock = false;
	
	$('#contenido li').click(function(){
		var $this = $(this),
			character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
		
		// Shift keys
		if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.boton').toggle();
			
			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		}
		
		// Caps lock
		if ($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		}
		
		// Delete
		if ($this.hasClass('delete')) {
			var html = $usuario.html();
			
			$usuario.html(html.substr(0, html.length - 1));
			return false;
		}
		
		// Special characters
		if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
		if ($this.hasClass('space')) character = ' ';
		if ($this.hasClass('tab')) character = "\t";
		if ($this.hasClass('return')) character = "\n";
		
		// Uppercase letter
		if ($this.hasClass('uppercase')) character = character.toUpperCase();
		
		// Remove shift once a key is clicked.
		if (shift === true) {
			$('.boton').toggle();
			if (capslock === false) $('.letter').toggleClass('uppercase');
			
			shift = false;
		}
		
		// Add the character
		$usuario.html($usuario.html() + character);
	});
});
</script>




 <script type="text/javascript">


	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>

x cierto hay codigo que sobra pero nose cual ya que lo encontre en una web si me puedes ir diciendo...

betokscr · 15 Marzo 2013, 05:45 AM

Tenia algo de tiempo libre, y aquí te dejo lo que salio:
http://fermilia.is-great.net/tv/

Descargar código fuente:
http://www.mediafire.com/?vmnqdmmiy6xh5ly

Si tienes alguna duda con la implementación del código con todo gusto la responderé.

Saludos

tecasoft · 15 Marzo 2013, 18:17 PM

me lo he copiado del 1º link y estoy intentando comprender, es decir aprender como lo has hecho funciona a la PERFECCION Y ERA LO QUE ESPERABA, SOLUCIONADO, pero me podrias decir el tvirtual.js explicarmelo mejor es que soy muy patoso con JQUERY, muchas gracias x tu comprension te mereces un 10 de nota.

betokscr · 15 Marzo 2013, 20:03 PM

Aquí te lo dejo:
No soy muy bueno para explicar, espero que entiendas.

Código [Seleccionar]


//by betokscr
$(document).ready(function(){
    
    var cuadro_activo = 'tv_1';//Variable con el cuadro de texto activo, se asigna a tv_1 por defecto.
    var deshabilitar_teclas = true; //Variable que indica si se desactivan o no las teclas, estan deshabilitadas por defecto.
    var caps = false;
    var shift = false;
    
    $('.tv_box').focus(function(){//Cuando se clickea un elemento que tiene como clase "tv_box"
        cuadro_activo = $(this).attr('id');//Se guarda en la variable cuadro_activo el id del elemento clickeado.
    });
    
    $('.tv_box').keypress(function(e){
        if(deshabilitar_teclas)//Si queremos deshabilitar las teclas
            return false;//Retornamos false cada vez que se presiona una
    });
    
    $('.tv_let, .tv_sim').click(function(){//Si algun elemento con clase "tv_let" o "tv_sim" es clickeado
        $('#'+cuadro_activo).val($('#'+cuadro_activo).val()+$(this).attr('value'));//Se escribe en el cuadro el valor del elemento clickeado
        if(shift)//Si el shift esta activo, hacemos las letras minuscula y actualizamos el estado de caps y shift.
        {
            $('.tv_let').each(function(){
                $(this).val($(this).attr('value').toLowerCase());
            });
            caps = false;
            shift = false;
        }
    });
    
    $('#caps').click(function(){
        if(!caps)//Si estan en minuscula, las hacemos mayuscula.
        {
	//Se toman todos los elementos con clase="tv_let" y su valor se pasa a mayuscula
            $('.tv_let').each(function(){
                $(this).val($(this).attr('value').toUpperCase());
            });
            caps = true;
        }
        else//Si estan en mayuscula, las hacemos minuscula
        {
	//Se toman todos los elementos con clase="tv_let" y su valor se pasa a minuscula
            $('.tv_let').each(function(){
                $(this).val($(this).attr('value').toLowerCase());
            });
            caps = false;
        }
        
    });
    
    $('#shift').click(function(){//Cuando se clickea el elemento con id=shift
	//Los estados de shift y caps se ponen a verdadero ya que las letras estaran en mayuscula.
        shift = true;
        caps = true;
	//Se toman todos los elementos con clase="tv_let" y su valor se pasa a mayuscula
        $('.tv_let').each(function(){
                $(this).val($(this).attr('value').toUpperCase());
        });
    });
    
    $('#backspace').click(function(){//Cuando se clickea el elemento con id=backspace
        if($('#'+cuadro_activo).val().length>0)//Se comprueba que el valor en el cuadro activo sea mayor a 0
            $('#'+cuadro_activo).val($('#'+cuadro_activo).val().substring(0, $('#'+cuadro_activo).val().length-1));//Si es mayor a 0, se toma la cadena menos la utlima letra y se actualiza el cuadro
    });
});
//by betokscr

Saludos

tecasoft · 15 Marzo 2013, 20:39 PM

ok, perfecto, voy a leermelo y gracias otra vez.