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.