Teclado virtual completo

Ricardo Fressa · Junho 25, 2009

olá, não sei bem se essa area é a correta para pedir isso...

Mas estou procurando um teclado virtual completo, com todas as teclas de um teclado comum...

Essa teclado virtual vai ficar visivel no navegador porque vai ficar numa maquina que nao vai ter teclado comum... essa maquina é Touch Sreen...

entao o kara vai apertar as teclas nesse teclado virtual que vai ficar na tela e preencher os textboxs...

alguém pode me ajudar?

Will Fernando · Junho 25, 2009

não sei a area para desenvolver algo assim, mas acho que não deve ser php .. :P

valww

Ricardo Fressa · Junho 25, 2009

okz, vou tentar outra area!

abraços

Marcio Leandro · Junho 26, 2009

Procure no forum de Java.

DeToNeS · Junho 26, 2009

Tem como você montar em JavaScript e MAPs -> http://www.w3schools.com/TAGS/tag_map.asp!

Ricardo Fressa · Junho 26, 2009

nao kara, tipo é um teclado comum mesmo, que vai aparecer na tela (web browser)...

ae o kara vai chegar e tocar na tela digitando no textboxs mesmo....

DeToNeS · Junho 26, 2009

Sim, os MAP's vão controlar as áreas de toque de cada botão! E o javascript vai se encaminhar de enviar os valores para o textbox!

Um exemplo que usei no site de um cliente!

http://www.bettertech.com.br/?site=login

Ricardo Fressa · Junho 26, 2009

isso mesmo que eu quero!

mas nao conseguir entender como faz

DeToNeS · Junho 26, 2009

Aqui um exemplo pra você poder se basear!

teclado.css

* {
margin: 0;
padding: 0;
list-style: none;
}
div#teclas {
border: 1px solid blue;
width: 80px;
}
div#teclas ul {
width: 80px;
text-align: center;
}
div#teclas li {
display: inline;
border: 1px solid black;
padding: 3px;
line-height: 31px;
margin: 2px;
}
div#teclas li a {
text-align: center;
font-weight: bold;
font-size: 12px;
font-family: Verdana, Arial, Helvetica;
text-decoration: none;
}
div#teclas li a.esconde {
color: white;
}
div#teclas li a.mostra {
color: black;
}

teclado.js

var campo = 'passwd'; //nome do campo que receberá os caracteres do teclado. Normalmente um campo input type="password"
function init() {
var sort = Math.random(); //sort recebe um número entre 0 e 1, sorteado randomicamente. Isso faz a cada reload os números aparecerem numa ordem
if ((sort >= 0) && (sort < 0.1)) { //de acordo com o valor de sort, atribuo um inteiro a ele
  sort = 0;
} else if ((sort >= 0.1) && (sort < 0.2)) {
  sort = 1;
} else if ((sort >= 0.2) && (sort < 0.3)) {
  sort = 2;
} else if ((sort >= 0.3) && (sort < 0.4)) {
  sort = 3;
} else if ((sort >= 0.4) && (sort < 0.5)) {
  sort = 4;
} else if ((sort >= 0.5) && (sort < 0.6)) {
  sort = 5;
} else if ((sort >= 0.6) && (sort < 0.7)) {
  sort = 6;
} else if ((sort >= 0.7) && (sort < 0.8)) {
  sort = 7;
} else if ((sort >= 0.8) && (sort < 0.9)) {
  sort = 8;
} else {
  sort = 9;
}
var teclas = $('teclas').getElementsByTagName('a'); //pego todos os elementos link dentro do div teclas
var i;
for (i = 0; i < teclas.length; i++) {
  teclas[i].firstChild.data = sort; //atribuo ao link o valor sorteado
  sort++;
  sort = (sort > 9) ? 0 : sort;
  var click = function(v) {
   $(campo).value += teclas[v].firstChild.data; //passo o valor do link para o campo do formulário
  };
  addEvent(teclas[i], "click", click.bind(this, i)); //atribuo o evento onclick dos links
  addEvent(teclas[i], "mouseover", esconde); //atribuo o evento onmouseover dos links, fazendo com que os números desapareçam
  addEvent(teclas[i], "mouseout", mostra); //atribuo o evento onmouseout dos links, fazendo com que os números reapareçam
}
}
function esconde() {
var teclas = $('teclas').getElementsByTagName('a');
var i;
for (i = 0; i < teclas.length; i++) {
  teclas[i].className = 'esconde';
}
}
function mostra() {
var teclas = $('teclas').getElementsByTagName('a');
var i;
for (i = 0; i < teclas.length; i++) {
  teclas[i].className = 'mostra';
}
}
//Trecho de código criado por Wilker, pego em [url="http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522"]http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522[/url]
function $(e) {
return document.getElementById(e);
}
var $A = Array.from = function(iterable) {
if (!iterable) return [];
if (iterable.toArray) {
  return iterable.toArray();
} else {
  var results = [];
  for (var i = 0; i < iterable.length; i++)
   results.push(iterable[i]);
  return results;
}
};
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
  return __method.apply(object, args.concat($A(arguments)));
};
};
//Fim do trecho de código criado por Wilker
function addEvent(obj, evType, fn) { //Função adaptada da original de Christian Heilmann, em [url="http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html"]http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html[/url]
if (typeof obj == "string") {
  if (null == (obj = document.getElementById(obj))) {
   throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
  }
}
if (obj.attachEvent) {
  return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
  return obj.addEventListener(evType, fn, true);
} else {
  throw new Error("Seu browser não suporta adição de eventos.");
}
}
addEvent(window, 'load', init); //adiciono a função init ao evento onload da página

teclado_muda.js

var campo = 'passwd'; //nome do campo que receberá os caracteres do teclado. Normalmente um campo input type="password"
function init() {
sorteio();
var teclas = $('teclas').getElementsByTagName('a'); //pego todos os elementos link dentro do div teclas
var i;
for (i = 0; i < teclas.length; i++) {
  var click = function(v) {
   $(campo).value += teclas[v].firstChild.data; //passo o valor do link para o campo do formulário
   sorteio();
  };
  addEvent(teclas[i], "click", click.bind(this, i)); //atribuo o evento onclick dos links
  addEvent(teclas[i], "mouseover", esconde); //atribuo o evento onmouseover dos links, fazendo com que os números desapareçam
  addEvent(teclas[i], "mouseout", mostra); //atribuo o evento onmouseout dos links, fazendo com que os números reapareçam
}
}
function sorteio() {
var sort = Math.random(); //sort recebe um número entre 0 e 1, sorteado randomicamente. Isso faz a cada reload os números aparecerem numa ordem
if ((sort >= 0) && (sort < 0.1)) { //de acordo com o valor de sort, atribuo um inteiro a ele
  sort = 0;
} else if ((sort >= 0.1) && (sort < 0.2)) {
  sort = 1;
} else if ((sort >= 0.2) && (sort < 0.3)) {
  sort = 2;
} else if ((sort >= 0.3) && (sort < 0.4)) {
  sort = 3;
} else if ((sort >= 0.4) && (sort < 0.5)) {
  sort = 4;
} else if ((sort >= 0.5) && (sort < 0.6)) {
  sort = 5;
} else if ((sort >= 0.6) && (sort < 0.7)) {
  sort = 6;
} else if ((sort >= 0.7) && (sort < 0.8)) {
  sort = 7;
} else if ((sort >= 0.8) && (sort < 0.9)) {
  sort = 8;
} else {
  sort = 9;
}
var teclas = $('teclas').getElementsByTagName('a'); //pego todos os elementos link dentro do div teclas
var i;
for (i = 0; i < teclas.length; i++) {
  teclas[i].firstChild.data = sort; //atribuo ao link o valor sorteado
  sort++;
  sort = (sort > 9) ? 0 : sort;
}
}
function esconde() {
var teclas = $('teclas').getElementsByTagName('a');
var i;
for (i = 0; i < teclas.length; i++) {
  teclas[i].className = 'esconde';
}
}
function mostra() {
var teclas = $('teclas').getElementsByTagName('a');
var i;
for (i = 0; i < teclas.length; i++) {
  teclas[i].className = 'mostra';
}
}
//Trecho de código criado por Wilker, pego em [url="http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522"]http://forum.imasters.com.br/index.php?s=&showtopic=198704&view=findpost&p=660522[/url]
function $(e) {
return document.getElementById(e);
}
var $A = Array.from = function(iterable) {
if (!iterable) return [];
if (iterable.toArray) {
  return iterable.toArray();
} else {
  var results = [];
  for (var i = 0; i < iterable.length; i++)
   results.push(iterable[i]);
  return results;
}
};
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
  return __method.apply(object, args.concat($A(arguments)));
};
};
//Fim do trecho de código criado por Wilker
function addEvent(obj, evType, fn) { //Função adaptada da original de Christian Heilmann, em [url="http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html"]http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html[/url]
if (typeof obj == "string") {
  if (null == (obj = document.getElementById(obj))) {
   throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
  }
}
if (obj.attachEvent) {
  return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
  return obj.addEventListener(evType, fn, true);
} else {
  throw new Error("Seu browser não suporta adição de eventos.");
}
}
addEvent(window, 'load', init); //adiciono a função init ao evento onload da página

teclado.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xml:lang="en" lang="en" xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-Language" content="pt-br" />
  <meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT" />
  <meta http-equiv="Cache-Control" content="no-store" />
  <meta http-equiv="Pragma" content="no-cache" />
  <title>Teclado Virtual</title>
  <script type="text/javascript" src="teclado.js"></script>
  <style type="text/css">@import url(teclado.css);</style>
</head>
<body>
  <form id="formulario" name="formulario" method="post" action="">
   <input type="text" name="passwd" id="passwd" />
  </form>
  <span id="teclado" name="teclado">
   <div id="teclas">
	<ul>
	 <li><a href="#" class="mostra">x</a></li>
	 <li><a href="#" class="mostra">x</a></li>
	 <li><a href="#" class="mostra">x</a></li>
	</ul>
	<ul>
	 <li><a href="#" class="mostra">x</a></li>
	 <li><a href="#" class="mostra">x</a></li>
	 <li><a href="#" class="mostra">x</a></li>
	</ul>
	<ul>
	 <li><a href="#" class="mostra">x</a></li>
	 <li><a href="#" class="mostra">x</a></li>
	 <li><a href="#" class="mostra">x</a></li>
	</ul>
	<ul>
	 <li><a href="#" class="mostra">x</a></li>
	</ul>
   </div>
  </span>
</body>
</html>

Espero ter ajudado!

DeToNeS · Junho 26, 2009

Esse não usa maps mais funciona em elementos HTML! Da pra ir tendo uma ideia do principal o JavaScript!

Arquivado

Teclado virtual completo

Recommended Posts

Ricardo Fressa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Will Fernando 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ricardo Fressa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcio Leandro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DeToNeS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ricardo Fressa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DeToNeS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ricardo Fressa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DeToNeS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

DeToNeS 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante