Ir para conteúdo
Fórum Script Brasil
  • 0

Vejam Esse Teclado Virtual

mortal

Perguntado por mortal,

 Share

Pergunta

mortal

mortal

Postado
Postado (editado) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Teclado Digital</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="return PosicionaTeclado(true)" onResize="PosicionaTeclado(true)">

&lt;script language="JavaScript">
function submeter(){var currentState = 1; var newState = 2;if (newState != currentState){document.FrmLogin.BtnSub.disabled = newState;document.FrmLogin.submit();}}
</SCRIPT>

&lt;script language="JavaScript">if(window!=top)top.location.href=location.href</SCRIPT>



&lt;script language=javascript>

//*************************************************************
//    CÓDIGO DISPONIBILIZADO POR: Tuba (tubalindo@gmail.com)
//  Baixei o codigo no forum do  Blaz (http://forum.blaz.com.br)
//    25/10/2004
//*************************************************************

var sForm='document.forms[0].'; //Form default
var iCampo=0;
var oTeclado=new Array();
var oFont=new Array();
var oCoord=new Array();
var oStatus=new Array();
var oCampos=new Array();
function getLeft(oImg){return(oImg.offsetParent ? (getLeft(oImg.offsetParent)+oImg.offsetLeft) : oImg.offsetLeft);}
function getTop(oImg){return(oImg.offsetParent ? (getTop(oImg.offsetParent)+oImg.offsetTop) : oImg.offsetTop);}
function PosicionaTeclado(bLayer){AtivaTeclado(getLeft(document.kb),getTop(document.kb),0,10,bLayer);}
function DefinirTeclas(){oFont[0]=new Array("'", unescape("%22"));oFont[1]=new Array(1,"!");oFont[2]=new Array(2,"@");oFont[3]=new Array(3,"#");oFont[4]=new Array(4,"$");oFont[5]=new Array(5,"%");oFont[6]=new Array(6,"¨");oFont[7]=new Array(7,"&");oFont[8]=new Array(8,"*");oFont[9]=new Array(9,"(");oFont[10]=new Array(0,")");oFont[11]=new Array("-","_");oFont[12]=new Array("=","+");oFont[13]=new Array("q","");oFont[14]=new Array("w","");oFont[15]=new Array("e","");oFont[16]=new Array("r","");oFont[17]=new Array("t","");oFont[18]=new Array("y","");oFont[19]=new Array("u","");oFont[20]=new Array("i","");oFont[21]=new Array("o","");oFont[22]=new Array("p","");oFont[23]=new Array("´","`");oFont[24]=new Array("[","{");oFont[25]=new Array("<-","");oFont[26]=new Array("a","");oFont[27]=new Array("s","");oFont[28]=new Array("d","");oFont[29]=new Array("f","");oFont[30]=new Array("g","");oFont[31]=new Array("h","");oFont[32]=new Array("j","");oFont[33]=new Array("k","");oFont[34]=new Array("l","");oFont[35]=new Array("ç","");oFont[36]=new Array("~","^");oFont[37]=new Array("]","}");oFont[38]=new Array("RET","");oFont[39]=new Array("\\","|");oFont[40]=new Array("z","");oFont[41]=new Array("x","");oFont[42]=new Array("c","");oFont[43]=new Array("v","");oFont[44]=new Array("b","");oFont[45]=new Array("n","");oFont[46]=new Array("m","");oFont[47]=new Array(",","<");oFont[48]=new Array(".",">");oFont[49]=new Array(";",":");oFont[50]=new Array("/","?");oFont[51]=new Array("RET","");oFont[52]=new Array("CAPS","");oFont[53]=new Array("CAPS","");oFont[54]=new Array("CAPS","");oFont[55]=new Array("SHIFT","");oFont[56]=new Array("SHIFT","");oFont[57]=new Array("SHIFT","");oFont[58]=new Array(" ","");oFont[59]=new Array(" ","");oFont[60]=new Array(" ","");oFont[61]=new Array(" ","");oFont[62]=new Array(" ", "");oFont[63]=new Array(" ","");oFont[64]=new Array(" ","");}
function PosicionarKB(intPosVertInicialOrig,intPosHozInicialOrig,intDesloca,intFator,blnOffLine){
 intPosVertInicialOrig=parseInt(intPosVertInicialOrig+Math.round(Math.random()*intFator));
 intPosHozInicialOrig =parseInt(intPosHozInicialOrig+intDesloca+Math.round(Math.random()*intFator));
 var intLarguraHozTcl=19;
 var intLarguraVerTcl=22;
 var intPosVertInicial=intPosVertInicialOrig;
 var intPosHozInicial=intPosHozInicialOrig;
 var intPosVertInicialOld=intPosVertInicialOrig;
 var intX1,intY1,intX2,intY2;
 for (var iIndice=0;iIndice<65;iIndice++){
  intX1=intPosVertInicial;
  intY1=intPosHozInicial;
  intX2=parseInt(intPosVertInicial+parseInt(intLarguraVerTcl-2));
  intY2=parseInt(intPosHozInicial+parseInt(intLarguraHozTcl-2));
  oCoord[iIndice]=new Array(intX1,intY1,intX2,intY2,oFont[iIndice][0],oFont[iIndice][1]);
  intPosVertInicial+=22;
  if ((parseInt(iIndice+1)%13)==0 && iIndice!=0){
   intPosHozInicial+=19;
   intPosVertInicial=intPosVertInicialOld;
  }
 }
 MostraKB(intPosVertInicialOrig,intPosHozInicialOrig,blnOffLine);
}
function AlterarStatus(strTecla){
 switch(strTecla){
  case "CAPS":
   if(oStatus[0][0]){TrocarTeclado(1);oStatus[0][0]=false;oStatus[1][0]=true;return true;}
   if(oStatus[2][0]){
    if (document.imgTeclado.complete){
     TrocarTeclado(3);oStatus[3][0]=true;oStatus[2][0]=false;return true;
    }
    else{alert("Aguarde...");return false;}
   }
   if (oStatus[3][0]){
    if (document.imgTeclado.complete){
     TrocarTeclado(2);oStatus[2][0]=true;oStatus[3][0]=false;return true;
    }
    else{alert("Aguarde...");return false;
    }
   }
   else{
    TrocarTeclado(0);oStatus[0][0]=true;oStatus[1][0]=false;return true;
   }
   break;
  case "SHIFT":
   if(oStatus[0][0]){TrocarTeclado(2);oStatus[0][0]=false;oStatus[2][0]=true;return true;}
   if(oStatus[1][0]){TrocarTeclado(3);oStatus[3][0]=true;oStatus[1][0]=false;return true;}
   if(oStatus[3][0]){TrocarTeclado(1);oStatus[1][0]=true;oStatus[3][0]=false;return true;}
   else{TrocarTeclado(0);oStatus[0][0]=true;oStatus[2][0]=false;return true;}
   break;
 }
 return true;
}
function TrocarTeclado(iIndice){
 document.imgTeclado.src=oTeclado[iIndice].src;
 return true;
}
function ManipularTeclado(evnt){
 var blnImg=false;
 var blnRet=false;
 if(navigator.appName=='Netscape'){
  if(evnt.target.name=="imgTeclado" || evnt.target=="java script:void(13)"){blnImg=true;}
  else{return true;}
 }
 else{
  if(window.event.srcElement.tagName == "IMG"){blnImg=true;}
 }
 if(blnImg){
  if(navigator.appName == 'Netscape') {
   var x=parseFloat(parseInt(evnt.pageX));
   var y=parseFloat(parseInt(evnt.pageY));
  }
  else{
   var x=parseFloat(parseInt(event.x)+parseFloat(document.body.scrollLeft));
   var y=parseFloat(parseInt(event.y)+parseFloat(document.body.scrollTop));
  }
  for(var iIndice=0;iIndice<oCoord.length;iIndice++){
   if((x>=oCoord[iIndice][0] && x<=oCoord[iIndice][2]) && (y>=oCoord[iIndice][1] && y <= oCoord[iIndice][3])){
    switch (oCoord[iIndice][4]){
     case "<-":
      eval(sForm+oCampos[iCampo][0]+".value="+sForm+oCampos[iCampo][0]+".value.substring(0,parseInt("+sForm+oCampos[iCampo][0]+".value.length)-1)");
      break;
     case "RET":
      NovoFoco();
      setTimeout("eval('"+sForm+oCampos[iCampo][0]+".focus()');",10);
      blnRet=true;
      break;
     case "CAPS":
      AlterarStatus("CAPS");
      break;
     case "SHIFT":
      AlterarStatus("SHIFT");
      break;
     default:
       if(oStatus[0][0]){AtualizarValor(oCoord[iIndice][4]);}
       if(oStatus[1][0] && isNaN(oCoord[iIndice][4])){AtualizarValor(oCoord[iIndice][4].toUpperCase());}
       if(oStatus[1][0] && !isNaN(oCoord[iIndice][4])){AtualizarValor(oCoord[iIndice][4]);}
       if(oStatus[2][0]){
        if(oCoord[iIndice][5]!=""){AtualizarValor(oCoord[iIndice][5]);}
        else{
         if(isNaN(oCoord[iIndice][4])){AtualizarValor(oCoord[iIndice][4].toUpperCase());}
         else{AtualizarValor(oCoord[iIndice][4]);}
        }
        AlterarStatus("SHIFT");
       }
       if(oStatus[3][0]){
        if(oCoord[iIndice][5]!=""){AtualizarValor(oCoord[iIndice][5]);}
        else{
         if(isNaN(oCoord[iIndice][4])){AtualizarValor(oCoord[iIndice][4].toUpperCase());}
         else{AtualizarValor(oCoord[iIndice][4]);}
        }
        AlterarStatus("SHIFT");
       }
    }//switch
   }
  }
 }
 if(!blnRet){setTimeout("eval('" + sForm + oCampos[iCampo][0] + ".focus();')",10);}
 return false;
}
function AtualizarValor(strValor){
 switch(oCampos[iCampo][2]){
  case "A": //Campo alfanumérico
   if(eval(sForm+oCampos[iCampo][0]+".value.length")<parseInt(oCampos[iCampo][1])){
    if (escape(strValor)=="%27"){eval(sForm+oCampos[iCampo][0]+".value+=\""+strValor+"\"");}
    else{
     var objTargetField=new Object(eval(sForm+oCampos[iCampo][0]));
     objTargetField.value += strValor;
    }
   }
   if(eval(sForm+oCampos[iCampo][0]+".value.length")==parseInt(oCampos[iCampo][1])){
    NovoFoco();
    setTimeout("eval('"+sForm+oCampos[iCampo][0]+".focus()');",10);
   }
   break;
  case "N": //Campo numérico
    if(eval("parseInt("+sForm+oCampos[iCampo][0]+".value.length)")<parseInt(oCampos[iCampo][1])){
     if(escape(strValor)=="%27"){
      eval(sForm+oCampos[iCampo][0]+".value+=ValidarNum(\"" + strValor + "\")");}
     else{
      var objTargetField=new Object(eval(sForm+oCampos[iCampo][0]));
      objTargetField.value += ValidarNum(eval("'" + strValor + "'"));
     }
    }
    if(eval("parseInt("+sForm+oCampos[iCampo][0]+".value.length)") == parseInt(oCampos[iCampo][1])){
     NovoFoco();
     setTimeout("eval('"+sForm+oCampos[iCampo][0]+".focus()');",10);
    }
    break;
 }
 return true;
}
function NovoFoco(){
 if(arguments.length>0){
  iCampo=arguments[0];
 }
 else{
  if(parseInt(parseInt(oCampos.length)-1)==parseInt(iCampo)){
   iCampo=0;
  }
  else{
   iCampo=parseInt(iCampo)+1;
  }
 }
}
function MostraKB(intPosVertInicialOrig,intPosHozInicialOrig,blnOffLine){
 if(navigator.appName=='Netscape'){
   window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP);
   if(parseFloat(navigator.appVersion.split(" ")[0])<5){
    if(!blnOffLine){document.writeln('<layer id="posicaotcl" left="'+intPosVertInicialOrig+'" top="'+intPosHozInicialOrig+'" ><A HREF="java script:void(13)"><img name="imgTeclado" border="0" src="'+oStatus[0][1]+'"></A></layer>');}
    else{
     var objLyr=document.posicaotcl;
     objLyr.top=intPosHozInicialOrig;
     objLyr.left=intPosVertInicialOrig;
    }
   }
   else{if(!blnOffLine){document.writeln('<layer id=posicaotcl style="position:absolute;left:'+intPosVertInicialOrig+';top:'+intPosHozInicialOrig+';"><a href="java script:void(13)"><img name=imgTeclado border=0 src='+oStatus[0][1]+'></a></layer>')}
   }
   window.onmousedown=ManipularTeclado;
 }
 else{ //IE
  if(!blnOffLine){document.writeln('<div id=divTeclado style="cursor:hand;width:284;height:93;position:absolute;left:'+intPosVertInicialOrig+'; top:'+intPosHozInicialOrig+'"><img name=imgTeclado border=0 src='+oStatus[0][1]+'></div>');}
  else{
   divTeclado.style.top=intPosHozInicialOrig;
   divTeclado.style.left=intPosVertInicialOrig;
  }
  document.imgTeclado.onmousedown=ManipularTeclado;
  document.imgTeclado.ondblclick=ManipularTeclado;
 }
}
function DefinirCampos(){
//Define os campos do form que aceitarão o teclado virtual, no formato Nome%Tamanho%Tipo
 for(iIndice=0;iIndice<arguments.length;iIndice++){
  oCampos[iIndice]=new Array(arguments[iIndice].split("%")[0],arguments[iIndice].split("%")[1],arguments[iIndice].split("%")[2]);
 }
}
function ObtemLayout(){
 var blnSel;
 for(iIndice=0;iIndice<arguments.length;iIndice++){
  if(iIndice==0)blnSel=true; else blnSel=false;
  oStatus[iIndice]=new Array(blnSel,arguments[iIndice]);
 }
 for(var iIndice=0;iIndice<oStatus.length;iIndice++){
  oTeclado[iIndice]=new Image();
  oTeclado[iIndice].src=oStatus[iIndice][1];
 }
}
function ValidarNum(intVal){if(isNaN(intVal)||intVal==" ") return ""; else return intVal;}
function AtivaTeclado(intPosVertInicial,intPosHozInicial,intDeslocamento,intFatorCorrecao,blnOffLine){
 DefinirTeclas();
 PosicionarKB(intPosVertInicial,intPosHozInicial,intDeslocamento,intFatorCorrecao,blnOffLine);
}
ObtemLayout("imagens/kb.gif","imagens/kbCaps.gif","imagens/kbShift.gif","imagens/kbShiftCaps.gif");
</SCRIPT>
<TABLE cellSpacing=0 cellPadding=0 align=center>
<FORM name="FrmLogin" action="login.asp" method="post">

              <TBODY>
              <TR>
                <TD vAlign=top>
                  <TABLE cellSpacing=1 cellPadding=3 align=center>
                    <TBODY>
                    <TR>
      <INPUT type="hidden" value="valida" name="acao">
              <INPUT type="hidden" value="shop" name="loja">
              <INPUT type="hidden" value="Administrar" name="link">
              <INPUT type="hidden" value="loja=shop&link=Administrar" name="url">                      <TD colSpan=2><FONT
                        style="FONT-SIZE: 11px; FONT-FAMILY: tahoma"
                        face=tahoma><B>Login no site </B></FONT></TD>
                    </TR>
                    <TR>
                      <TD colSpan=2><FONT
                        style="FONT-SIZE: 10px; COLOR: #003366; FONT-FAMILY: tahoma"
                        face=tahoma>Esta é uma área de acesso
                    restrito ! </FONT></TD>
                    </TR>
                    <TR>
                      <TD><FONT style="FONT-SIZE: 11px; FONT-FAMILY: tahoma"
                        face=tahoma>Usuário:</FONT></TD>
                      <TD><INPUT style="FONT-SIZE: 11px; FONT-FAMILY: tahoma"
                        tabIndex=1 name=usr autocomplete="OFF"></TD></TR>
                    <TR>
                      <TD align=right colSpan=2>
                        <TABLE cellSpacing=0 cellPadding=0>
                          <TBODY>
                          <TR>
                            <TD
                            style="BORDER-RIGHT: #9c9c9c 1px solid; BORDER-TOP: #9c9c9c 1px solid; BORDER-LEFT: #9c9c9c 1px solid; BORDER-BOTTOM: #9c9c9c 1px solid">
                              <TABLE cellSpacing=2 cellPadding=2>
                                <TBODY>
                                <TR>
                                <TD><FONT
                                style="FONT-SIZE: 11px; FONT-FAMILY: tahoma"
                                face=tahoma>Senha:</FONT></TD>
                                <TD><INPUT
                                style="FONT-SIZE: 11px; FONT-FAMILY: tahoma"
                                onfocus=NovoFoco(2) tabIndex=2 type=password
                                name=sen></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><IMG
                        src="imagens/borda.gif"
                        alt="" width="36" height="11"
                        border=0></TD></TR>
                    <TR>
                      <TD align=middle colSpan=2><INPUT style="FONT-SIZE: 11px; FONT-FAMILY: tahoma" onclick=submeter() tabIndex=3 type=submit value="   Entrar  " name=BtnSub>
<INPUT style="FONT-SIZE: 11px; FONT-FAMILY: tahoma" type=reset value=Cancelar></TD></TR></TBODY></TABLE></TD>
                <TD vAlign=bottom>
                  <TABLE cellSpacing=0 cellPadding=0 align=center>
                    <TBODY>
                    <TR>
                      <TD vAlign=top height=101><IMG
                        src="imagens/shim.gif"
                        name=kb width="1" height="1"></TD></TR>
                    <TR>
                      <TD align=middle><FONT style="FONT-SIZE: 10px"
                        face=tahoma>      Para sua
                        segurança, informe sua senha utilizando o
                      teclado.</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></form></TABLE>
<br>
<div align="center">
  <p><FONT
                        style="FONT-SIZE: 11px; FONT-FAMILY: tahoma"
                        face=tahoma><B>Para digitar maiúsculas ou caracteres
    da parte superior<br>
    do teclado, clique em CAPS LOCK ou SHIFT.</B></FONT><br>
    <br>
    <br>
  </p>
</div>
<p>
  &lt;script>DefinirCampos("url","usr","sen%999%A","sen%999%A");PosicionaTeclado(false);</SCRIPT>
  &lt;script>document.FrmLogin.sen.focus();</SCRIPT>
</p>
</body>
</html>

<font color="#FF0000" size="2"><center>esse script só funciona com o browser internet explorer da microsoft.<br>

Se voçê estiver usando em outro browser, a autenticação falhará. </center></font><br>

Tenho esse teclado virtual aki, só que quando você usa ele no firefox, você clika na letra por exemplo na "d" , dai ele aparece no campo text assim: dd. As imagens estão em gif e este teclado também função de caps lock , shift , e no firefox também não funciona. Eu queria a ajuda de vocês pra resolver esse problema. Se alguém conseguir poste o script aki fazendo um favor ! obrigado.

as imagens:

Imagens

Será q ninguém sabe, mas que b****a ...

Será q ninguém sabe, mas que b****a ...

Editado por mortal
Inserir tags Code
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0
Mestre SAM

Mestre SAM

Postado
Postado

e ae mortal,

Será q ninguém sabe, mas que b****a ...
cara, ta nervoso? vai pescar!!!

provavelmente muita gente sabe, mas se tu chegar chutando o balde assim,

as pessoas não vao querer compartilhar o q sabem com você.

chega no sapatinho, na manha, q tu acha o q procura.

seguinte, fiz uns teste aqui no IE e no FF.

o q acontece é o seguinte, na sua tag body você chama uma funcao no evento onload,

e no final da mesma pagina, chama a mesma funcao novamente.

<body onload="return PosicionaTeclado(true)" onResize="PosicionaTeclado(true)">

<script>DefinirCampos("url","usr","sen%999%A","sen%999%A");PosicionaTeclado(false);</SCRIPT>

<script>document.FrmLogin.sen.focus();</SCRIPT>

o q acontece aqui, é q cada navegador interpreta o codigo a sua maneira,

então, o IE vai entrar no seu metodo, setar as variaveis e deixar em cache para leitura.

quando você chamar o metodo novamente, ele vai verificar no cache q aquele objeto já

esta armazenado, e vai sobrepor.

no FF não, você chama o metodo, ele seta as variaveis e deixa em cache para leitura.

quando você chama novamente, ele aloca outro espaço na memoria com as mesmas variaveis.

então, quando você clica no teclado virtual, no IE ele acha apenas um objeto, então adiciona

apenas um caracter no input.

enquanto no FF, ele acha dois objetos, então executa o metodo de adicionar 2 vezes.

para resolver isso, basta chamar o metodo de PosicionaTeclado apenas uma vez

ao carregar a pagina.

você pode fazer o teste, retire da tag <body> os eventos.

deixe apenas no final do codigo. veja como vai imprimir apenas 1 caracter, como no IE.

e era isso,

sucesso ai,

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,6k
×
×
  • Criar Novo...