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!!!