Array
(
)

Teclado Virtual, é possivel?

PHP
Mauricio Padua
   - 25 dez 2013

amigos, uma pergunta que acredito ser simples, é possivel criar um teclado virtual, em uma aplicação php, exemplo:
https://minhaconta.orama.com.br/login
simplesmente para o usuario não utilizar o teclado do computador, igual a maioria de sites de bancos.

Marcio Araujo
   - 25 dez 2013

um passo a passo perfeito, olhe aew

http://www.webmaster.pt/teclado-virtual-php-mysql-11352.html

Roniere Almeida
   - 25 dez 2013


Citação:
um passo a passo perfeito, olhe aew

http://www.webmaster.pt/teclado-virtual-php-mysql-11352.html


interessante, como foi escrito acima, isso tem nos sistemas de internet banking.

Roniere Almeida
   - 25 dez 2013


Citação:
um passo a passo perfeito, olhe aew

http://www.webmaster.pt/teclado-virtual-php-mysql-11352.html


interessante, como foi escrito acima, isso tem nos sistemas de internet banking.

Lincoln Coutinho
   - 27 dez 2013

PHP puro creio que não...
Agora utilizando javascript (evento click) nos elementos html é possível que quando
o usuário clique em algum elemento html, o javascript atribui um valor a um input text por exemplo...

Mauricio Padua
   - 29 dez 2013

Lincoln Coutinho, mas essa opção do javascript elimina a utilização do teclado do fisico?

Lincoln Coutinho
   - 30 dez 2013

Sim, Mauricio...
Ao clicar no elemento HTML, ele ira atribuir e concatenar um novo valor ao valor antigo de um input...
Eliminando o uso de um teclado fisico...

Mauricio Padua
   - 30 dez 2013

então não precisa de nada especial não é? codigo?

Lincoln Coutinho
   - 02 jan 2014

Em anexo o código:

#Código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="pt-br" lang="pt-br">
  <head>
    <title>Página de área restrita c/ teclado virtual v2.0</title>
    <meta name="author" content="Lincoln Coutinho" />
 
    <style type="text/css">   /* Estilos da página: personalize a seu gosto */
      <!--
      * {font: 10pt 'trebuchet ms',Arial, Sans-serif}
      a:link, a:visited, a:active {color: #3028D3; text-decoration: none}
      a:hover{text-decoration: underline}
      td {background-color: #010420; text-align: center; color: #FFFFFF}
      .oculto {display:none}
      -->
    </style>
    
    <script language="javascript" type="text/javascript">
      <!--
      function Shift() {
        if (document.getElementById(26).value == "a") {
          ind = 49;
          inicio = 1;
          fim = 49;
        }
        else {
          ind = -49;
          inicio = 50;
          fim = 98;
        }
        
        for (chr = inicio; chr <= fim; chr++) {
          aux = document.getElementById(chr).value;
          document.getElementById(chr).value = document.getElementById(chr + ind).value;
          document.getElementById(chr + ind).value = aux;
        }     
      }
 
      function Digitar(tecla) {
        document.login.password.value += tecla
      }
 
      function DefinirKeylogger() { // Definição mostrada para o usuário ao clicar no link
        window.alert('Usando o teclado virtual, você evita a ação de keyloggers. Estes programas maliciosos da categoria dos spywares são instalados no computador sem que o usuário perceba e gravam tudo o que for digitado, inclusive teclas como backspace, delete, setas de direção, etc e enviam para o email do espião. Os keyloggers também podem estar presentes em computadores públicos como de lan houses e cyber cafés (instalados intencionalmente pelo dono) com o objetivo de capturar as senhas digitadas pelo internauta inocente.')
      }
      //-->
    </script>
  </head>
 
  <body>
    <form name="login" action="URL-do-script" method="post"> <!-- Preencher a URL do script. Ex.: database.pl -->
      <table width="225" cellpadding="5" cellspacing="0" summary="form"> <!-- personalize como quiser -->
        <tr>
          <td colspan="2" style="background-color: #4585B8; color: #000000">Área restrita:</td>
        </tr>
        <tr align="center">
          <td>Usuário:</td>
          <td><input type="text" name="username" size="20" /></td>
        </tr>
        <tr align="center">
          <td>Senha:</td>
          <td><input type="password" name="password" size="20" /></td>
        </tr>
        <tr align="center">
          <td colspan="2" align="center"><input type="submit" value="Login" /></td>
        </tr>
      </table>
    </form>
    <br />
    Use o teclado virtual para evitar a ação de <a href="javascript:DefinirKeylogger()">keyloggers</a>:<br /><br />
    <form name="teclas" action="#">
      <input type="button" value="'" onclick="Digitar(this.value)" id="1" /> 
      <input type="button" value="1" onclick="Digitar(this.value)" id="2" /> 
      <input type="button" value="2" onclick="Digitar(this.value)" id="3" /> 
      <input type="button" value="3" onclick="Digitar(this.value)" id="4" /> 
      <input type="button" value="4" onclick="Digitar(this.value)" id="5" /> 
      <input type="button" value="5" onclick="Digitar(this.value)" id="6" /> 
      <input type="button" value="6" onclick="Digitar(this.value)" id="7" /> 
      <input type="button" value="7" onclick="Digitar(this.value)" id="8" /> 
      <input type="button" value="8" onclick="Digitar(this.value)" id="9" /> 
      <input type="button" value="9" onclick="Digitar(this.value)" id="10" /> 
      <input type="button" value="0" onclick="Digitar(this.value)" id="11" /> 
      <input type="button" value="-" onclick="Digitar(this.value)" id="12" /> 
      <input type="button" value="=" onclick="Digitar(this.value)" id="13" /> <br /><br />
          <input type="button" value="q" onclick="Digitar(this.value)" id="14" /> 
      <input type="button" value="w" onclick="Digitar(this.value)" id="15" /> 
      <input type="button" value="e" onclick="Digitar(this.value)" id="16" /> 
      <input type="button" value="r" onclick="Digitar(this.value)" id="17" /> 
      <input type="button" value="t" onclick="Digitar(this.value)" id="18" /> 
      <input type="button" value="y" onclick="Digitar(this.value)" id="19" /> 
      <input type="button" value="u" onclick="Digitar(this.value)" id="20" /> 
      <input type="button" value="i" onclick="Digitar(this.value)" id="21" /> 
      <input type="button" value="o" onclick="Digitar(this.value)" id="22" /> 
      <input type="button" value="p" onclick="Digitar(this.value)" id="23" /> 
      <input type="button" value="´" onclick="Digitar(this.value)" id="24" /> 
      <input type="button" value="[" onclick="Digitar(this.value)" id="25" /><br /><br />
            <input type="button" value="a" onclick="Digitar(this.value)" id="26" /> 
      <input type="button" value="s" onclick="Digitar(this.value)" id="27" /> 
      <input type="button" value="d" onclick="Digitar(this.value)" id="28" /> 
      <input type="button" value="f" onclick="Digitar(this.value)" id="29" /> 
      <input type="button" value="g" onclick="Digitar(this.value)" id="30" /> 
      <input type="button" value="h" onclick="Digitar(this.value)" id="31" /> 
      <input type="button" value="j" onclick="Digitar(this.value)" id="32" /> 
      <input type="button" value="k" onclick="Digitar(this.value)" id="33" /> 
      <input type="button" value="l" onclick="Digitar(this.value)" id="34" /> 
      <input type="button" value="ç" onclick="Digitar(this.value)" id="35" /> 
      <input type="button" value="~" onclick="Digitar(this.value)" id="36" /> 
      <input type="button" value="]" onclick="Digitar(this.value)" id="37" /><br /><br />
           <input type="button" value="" onclick="Digitar(this.value)" id="38" />
      <input type="button" value="z" onclick="Digitar(this.value)" id="39" /> 
      <input type="button" value="x" onclick="Digitar(this.value)" id="40" /> 
      <input type="button" value="c" onclick="Digitar(this.value)" id="41" /> 
      <input type="button" value="v" onclick="Digitar(this.value)" id="42" /> 
      <input type="button" value="b" onclick="Digitar(this.value)" id="43" /> 
      <input type="button" value="n" onclick="Digitar(this.value)" id="44" /> 
      <input type="button" value="m" onclick="Digitar(this.value)" id="45" /> 
      <input type="button" value="," onclick="Digitar(this.value)" id="46" /> 
      <input type="button" value="." onclick="Digitar(this.value)" id="47" /> 
      <input type="button" value=";" onclick="Digitar(this.value)" id="48" /> 
      <input type="button" value="/" onclick="Digitar(this.value)" id="49" /> 
      <input type="button" value="shift" onclick="Shift()" /><br /><br />
      <input type="button" value=" " onclick="Digitar(this.value)" style="width: 230px; height: 22px; margin-left: 100px" />
      
      <!-- - - - - Início dos campos ocultos - - - - - -->
      <input type="button" value='"' onclick="Digitar(this.value)" class="oculto" id="50" />
      <input type="button" value="!" onclick="Digitar(this.value)" class="oculto" id="51" />
      <input type="button" value="@" onclick="Digitar(this.value)" class="oculto" id="52" />
      <input type="button" value="#" onclick="Digitar(this.value)" class="oculto" id="53" />
      <input type="button" value="$" onclick="Digitar(this.value)" class="oculto" id="54" />
      <input type="button" value="%" onclick="Digitar(this.value)" class="oculto" id="55" />
      <input type="button" value="¨" onclick="Digitar(this.value)" class="oculto" id="56" />
      <input type="button" value="&" onclick="Digitar(this.value)" class="oculto" id="57" />
      <input type="button" value="*" onclick="Digitar(this.value)" class="oculto" id="58" />
      <input type="button" value="(" onclick="Digitar(this.value)" class="oculto" id="59" />
      <input type="button" value=")" onclick="Digitar(this.value)" class="oculto" id="60" />
      <input type="button" value="_" onclick="Digitar(this.value)" class="oculto" id="61" />
      <input type="button" value="+" onclick="Digitar(this.value)" class="oculto" id="62" />
      <input type="button" value="Q" onclick="Digitar(this.value)" class="oculto" id="63" />
      <input type="button" value="W" onclick="Digitar(this.value)" class="oculto" id="64" />
      <input type="button" value="E" onclick="Digitar(this.value)" class="oculto" id="65" />
      <input type="button" value="R" onclick="Digitar(this.value)" class="oculto" id="66" />
      <input type="button" value="T" onclick="Digitar(this.value)" class="oculto" id="67" />
      <input type="button" value="Y" onclick="Digitar(this.value)" class="oculto" id="68" />
      <input type="button" value="U" onclick="Digitar(this.value)" class="oculto" id="69" />
      <input type="button" value="I" onclick="Digitar(this.value)" class="oculto" id="70" />
      <input type="button" value="O" onclick="Digitar(this.value)" class="oculto" id="71" />
      <input type="button" value="P" onclick="Digitar(this.value)" class="oculto" id="72" />
      <input type="button" value="`" onclick="Digitar(this.value)" class="oculto" id="73" />
      <input type="button" value="{" onclick="Digitar(this.value)" class="oculto" id="74" />
      <input type="button" value="A" onclick="Digitar(this.value)" class="oculto" id="75" />
      <input type="button" value="S" onclick="Digitar(this.value)" class="oculto" id="76" />
      <input type="button" value="D" onclick="Digitar(this.value)" class="oculto" id="77" />
      <input type="button" value="F" onclick="Digitar(this.value)" class="oculto" id="78" />
      <input type="button" value="G" onclick="Digitar(this.value)" class="oculto" id="79" />
      <input type="button" value="H" onclick="Digitar(this.value)" class="oculto" id="80" />
      <input type="button" value="J" onclick="Digitar(this.value)" class="oculto" id="81" />
      <input type="button" value="K" onclick="Digitar(this.value)" class="oculto" id="82" />
      <input type="button" value="L" onclick="Digitar(this.value)" class="oculto" id="83" />
      <input type="button" value="Ç" onclick="Digitar(this.value)" class="oculto" id="84" />
      <input type="button" value="^" onclick="Digitar(this.value)" class="oculto" id="85" />
      <input type="button" value="}" onclick="Digitar(this.value)" class="oculto" id="86" />
      <input type="button" value="|" onclick="Digitar(this.value)" class="oculto" id="87" />
      <input type="button" value="Z" onclick="Digitar(this.value)" class="oculto" id="88" />
      <input type="button" value="X" onclick="Digitar(this.value)" class="oculto" id="89" />
      <input type="button" value="C" onclick="Digitar(this.value)" class="oculto" id="90" />
      <input type="button" value="V" onclick="Digitar(this.value)" class="oculto" id="91" />
      <input type="button" value="B" onclick="Digitar(this.value)" class="oculto" id="92" />
      <input type="button" value="N" onclick="Digitar(this.value)" class="oculto" id="93" />
      <input type="button" value="M" onclick="Digitar(this.value)" class="oculto" id="94" />
      <input type="button" value="<" onclick="Digitar(this.value)" class="oculto" id="95" />
      <input type="button" value=">" onclick="Digitar(this.value)" class="oculto" id="96" />
      <input type="button" value=":" onclick="Digitar(this.value)" class="oculto" id="97" />
      <input type="button" value="?" onclick="Digitar(this.value)" class="oculto" id="98" />
     
       
    </form>
  </body>
</html>

Mauricio Padua
   - 26 set 2014

Desculpa a demora, demais por sinal, agradeço pelo codigo, usarei ele quando precisar. vou aprender, entender!!!