Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Teclado Virtual

02-03-2007 08:23

Abaixo passo o código de um teclado virutal, o visitante pode movê-lo pela tela.
<style type="text/css"> // configuração da caixa móvel #scontentmain { POSITION: relative; width:100%; } #scontentbar { WIDTH: 100%; HEIGHT:100%; CURSOR: hand;  background-color:#fefefe; font-family:tahoma; font-size:9pt; color:#696969; font-weight:bold;} </style>

<!-- FORMULÁRIO QUE USA OS DADOS DO TECLADO //-->
<form name="form" method="POST"> <input type="text" name="senha" class="senha" readonly> <input class="botao" type="submit" value="Enviar"> </form>

<!-- FORMULÁRIO QUE USA OS DADOS DO TECLADO //-->

<script> /* script para mover o teclado */ var dragapproved=false var zcor,xcor,ycor function movescontentmain(){ if (event.button==1&&dragapproved){ zcor.style.pixelLeft=tempvar1+event.clientX-xcor zcor.style.pixelTop=tempvar2+event.clientY-ycor leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop return false } } function dragscontentmain(){ if (!document.all) return if (event.srcElement.id=="scontentbar"){ dragapproved=true zcor=scontentmain tempvar1=zcor.style.pixelLeft tempvar2=zcor.style.pixelTop xcor=event.clientX ycor=event.clientY document.onmousemove=movescontentmain } } document.onmousedown=dragscontentmain document.onmouseup=new Function("dragapproved=false") </script>


<div id="scontentmain"> <div id="scontentbar" style="position:absolute; left:300px; top:50px;"> Teclado Virtual (mova) <br clear="all"> <div style="position:absolute;">

<!-- CÓDIDO DO TECLADO VIRTUAL //-->
<style type="text/css"> /* configuração dos botões */ .botao{ background-color:#f9f9f9; border:1px solid #cccccc; font-family:tahoma;font-size:8pt;color:#333333; padding:3px 3px 3px 3px; font-weight:bold; } .senha{ height:24px; background-color:#f9f9f9; border:1px solid #cccccc; font-family:tahoma;font-size:8pt;color:#696969; padding:2px 2px 2px 2px; font-weight:bold; } </style>


<TABLE cellpading="1" cellspacing="1" style="border:1px solid #cccccc;"> <TR><TD> <table> <tr> <td> <input class="botao" type=button value='q' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='w' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='e' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='r' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='t' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='y' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='u' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='i' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='o' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='p' onclick="document.form.senha.value+=this.value"> </td></tr> <tr><td> <input class="botao" type=button value='a' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='s' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='d' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='f' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='g' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='h' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='j' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='k' onclick="document.form.senha.value+=this.value"> </td><td cospan="2"> <input class="botao" type=button value='l' onclick="document.form.senha.value+=this.value"> </td></tr> <tr><td> <input class="botao" type=button value='z' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='x' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='c' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='v' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='b' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='n' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='m' onclick="document.form.senha.value+=this.value"> </td></tr> </table> </TD> <TD> <table> <tr><td> <input class="botao" type=button value='7' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='8' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='9' onclick="document.form.senha.value+=this.value"> </td></tr> <tr><td> <input class="botao" type=button value='4' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='5' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='6' onclick="document.form.senha.value+=this.value"> </td></tr> <tr><td> <input class="botao" type=button value='1' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='2' onclick="document.form.senha.value+=this.value"> </td><td> <input class="botao" type=button value='3' onclick="document.form.senha.value+=this.value"> </td></tr> <tr><td colspan="3"> <input class="botao" type=button value='0' onclick="document.form.senha.value+=this.value"> </td></tr> </table> </TD> </TR> <TR><TD COLSPAN="6" ALIGN="center"> <input class="botao" type="button" value="Limpar" onclick="document.form.senha.value=''"> </TD></TR> </TABLE> <!-- CÓDIDO DO TECLADO VIRTUAL //-->   </div> </div> </div>   </TD></TR></TABLE>

0
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Teclado Virtual

25-12-2011 22:45

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado