Teclado virtual em HTML5 e JS - RESOLVIDO -

7 respostas
lucas-calixto

Olá,

Eu precisando de ajuda na construção de um teclado numérico virtual em HTML5 e JS, para um site mobile, porem o campo imput numérico ao ser clicado não pode acionar o teclado padrão do dispositivo, como se o imput não fosse um campo editável para o navegador e sim somente para o teclado virtual.

Desde já agradeço a atenção de todos.

7 Respostas

DarlanCaruso

Boa noite, amigo.

Você precisa de um teclado virtual que o usuário possa selecionar o teclado padrão do dispositivo?
Se o campo é numérico, não existe a necessidade de acionar o padrão mobile uma vez que só será necessário os números, qual seu objetivo?

Abraço

lucas-calixto

@DarlanCaruso eu estou querendo ser mais pratico para o usuário, sendo que o no website só terá um capo numérico e o teclado. A ideia do teclado virtual e que o teclado terá as teclas grandes e só terá a opção das teclas de 0 a 9, a backspace e um botão de confirmar.

DarlanCaruso

Compreendo.
Use os keycode do Javascript pra exibir na tela o texto ou número.

http://www.w3schools.com/jsref/event_key_keycode.asp

Nesse site explica com conseguir o código referente a tecla. No exemplo 1, quando ele digitou “w” o código retornou o número 119, que é o keycode de “w”. Faça esse debug para os números de 0 a 9, seu espaço e backspace (o botão de confirmar pode ser um botão comum, sem problemas) e crie seu teclado virtual.

Com esses keycodes, você pode criar condições de que quando for digitado a tecla referente ao keycode ele exiba na tela o texto ou número correspondente.

Abraço

lucas-calixto

Ótimo @DarlanCaruso, o teclado ficou tranquilo porem meu maior problema que eu não posso colocar um campo input (pois irá aparecer o teclado padrão do dispositivo), e os números digitados tem que aparecer na tela e ser enviados no formulário. Segue um exemplo do problema. os números que estão aparecendo não podem estar em um campo input, mas eles tem que estar lá, além de serem enviados no form.

DarlanCaruso

Existe a opção readonly, pode funcionar para você:
http://www.w3schools.com/tags/att_input_readonly.asp

Abraço

lucas-calixto

Olá @DarlanCaruso, eu pesquisei muito e achei a propriedade textContent do JS e fiz um experimento, segue código.

index.html (2.9 KB)

DarlanCaruso

Ficou muito interessante, amigo!
Obrigado por compartilhar o código e a informação.

Abraço

Criado 9 de março de 2016
Ultima resposta 13 de mar. de 2016
Respostas 7
Participantes 2