Teclado virtual

[vonzuben 12]

Alguém conhece algum site sobre teclado virtual, como esse do link abaixo para dar um estudada?

 

https://minhaconta.orama.com.br/login

 

Moderador, mover para outra categoria que postei no lugar errado.

[LeoO_DF 22]

Eu não entendi bem ele, Parece aqueles teclas de banco que tem opções entre várias para poder proteger a senha, isso é ruim já que você não sabe a senha do usuário, enfim use:

<button id="Teclado" rel="Input a ser Creditada" rev="Número a ser Adicionado" />Número a ser Adicionado</button> 

Exemplo:

<button id="Teclado" rel="NomeDeUsuario" rev="9" />9</button> 

<input id="NomeDeUsuario" pleocharder="Nome de usuário" type="text" />

Depois use jQuery:

$(document).ready(function() {
	$("button#Teclado").click(function(event){
		var Input_Teclado = $(this).attr("rel");	
		var Caractere = $(this).attr("rev");	
		if(Caractere != "" && Caractere != null)//Verifica se foi preenchido algum caractere no Button
		{ 
			if(Input_Teclado != "" && Input_Teclado != null)//Verifica se Foi inserido uma input para inserir os caracteres
			{
				$("#"+Input_Teclado).val($("#"+Input_Teclado).val()+Caractere);//Inseri na Input o que já havia e adiciona o Caractere do butão
				return 1;
			}
			else//Insere na input com focus
			{
				$("input").on("focus", function(event){//Pega a Input com focus
					$(this).val($(this).val()+Caractere);//Inseri na Input o que já havia e adiciona o Caractere do butão
					return 1;
				});
			}
		}
	});
});

Não tenho certeza se vai funcionar, fiz aqui nas pressas e não da pra testar, Aquele que ta no site é um pouco mais avançado que isso mais não da para eu fazer agora, iria precisar fazer testes e etc, mais com esse já se tem uma base daquele

 

@EDIT

 

Olhando o f12 deles achei:

<input class="span12" id="id_password" name="password" type="password" autocomplete="off" readonly="readonly">
<input type="button" class="autenticacao_btn" id="btn-1" value="2 ou 1">
<input type="button" class="autenticacao_btn" id="btn-2" value="7 ou 6">
<input type="button" class="autenticacao_btn" id="btn-3" value="9 ou 4">
<input type="button" class="autenticacao_btn" id="btn-4" value="5 ou 3">
<input type="button" class="autenticacao_btn" id="btn-5" value="0 ou 8">

 

$('#btn-1').click(function () {
		element = document.getElementById('id_password');
		current = element.value;
		if(current.length <= 5 ){
			element.value = current+"0";
		}
	});
	$('#btn-2').click(function () {
		element = document.getElementById('id_password');
		current = element.value;
		if(current.length <= 5 ){
			element.value = current+"1";
		}
	
	});
	$('#btn-3').click(function () {
		element = document.getElementById('id_password');
		current = element.value;
		if(current.length <= 5 ){
			element.value = current+"2";
		}
	});
	$('#btn-4').click(function () {
		element = document.getElementById('id_password');
		current = element.value;
		if(current.length <= 5 ){
			element.value = current+"3";
		}
	
	});
	$('#btn-5').click(function () {
		element = document.getElementById('id_password');
		current = element.value;
		if(current.length <= 5 ){
			element.value = current+"4";
		}
	});

Não entendi bem a Lógica deles, mais eles apenas adicionam um Número ao valor atual da input, enfim o sistemas deles é meio estático e talz, com o meu sistema é mais automático, você pode até criar um teclado virtual completo e talz enfim, ai você decide.