Teclado Virtual

Aqui você verá artigos sobre JavaScript

Moderador: web

responder a dúvida

Teclado Virtual

Mensagem por web Offline » Sex Mar 02, 2007 9:23 am


Abaixo passo o código de um teclado virutal, o visitante pode movê-lo pela tela.
Código: Selecionar todos
<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 //-->

<TABLE width="300" heigth="300"><TR><TD>
<script language=JavaScript1.2>
/* 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>



detalhes...

Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.

Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com

Avatar do usuário
web
ADMIN
ADMIN
Mensagens: 12456
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil

Teclado Virtual

Mensagem por web Offline » Dom Dez 25, 2011 10:45 pm

Outras versões do teclado virtual

Demonstração
http://www.dotnetcurry.com/Demos/jQuery ... tualkb.htm
Fonte
http://www.devcurry.com/2010/12/jquery- ... werty.html

Demonstração
http://keith-wood.name/keypad.html#styling

detalhes...

Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.

Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com

Avatar do usuário
web
ADMIN
ADMIN
Mensagens: 12456
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
responder a dúvida

Voltar para Artigos sobre JavaScript

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 3 visitantes
CodigosnaWeb | CodigosnaWeb/forum | codigosnaweb1 [@] gmail [.] com | |
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Traduzido por: Suporte phpBB