Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Luciano Silveira Marco

Teclado virtual para entrada de valores

Recommended Posts

Olá amigos, sou novo no fórum e estou aprendendo HTML. Gostaria de pedir ajuda sobre um exemplo que estou tentando montar e que apesar de bem simples é muito importante para mim, tenho um campo para entrada de valores e se eu digito diretamente nele a máscara que configura o valor 9.999,99 funciona sem problemas, mas preciso que funcione desta maneira quando eu clicar nos botões de números também, mas não sei como jogar a função "MascaraMoeda" nos botões:

 

 

<form>

<table cellpadding="2" cellspacing="2" border="0">
<tr>
<td colspan="3" align="center"><input type="text" id="valor" onKeyPress="return(MascaraMoeda(this,'.',',',event))" size="35"></td>

</tr>
<tr>
<td><input type="button" value=" 1 " style="font-size:25px;" onclick = "document.getElementById('valor').value = return(MascaraMoeda(this.value.'.',',',event))"></td>
<td><input type="button" value=" 2 " style="font-size:25px;" onclick = "document.getElementById('valor').value = return(MascaraMoeda(this.value.'.',',',event))"></td>
<td><input type="button" value=" 3 " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>
</tr>
<tr>
<td><input type="button" value=" 4 " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>
<td><input type="button" value=" 5 " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>
<td><input type="button" value=" 6 " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>
</tr>
<tr>
<td><input type="button" value=" 7 " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>
<td><input type="button" value=" 8 " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>
<td><input type="button" value=" 9 " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>
</tr>
<tr>
<td><input type="button" value=" 0 " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>

<td><input type="button" value=" C " style="font-size:25px;" onclick = "document.getElementById('valor').value =document.getElementById('valor').value+ this.value"></td>
</tr>
</table>
</form>

Compartilhar este post


Link para o post
Compartilhar em outros sites

você vai precisar utilizar o keycode, tipo é um jeito de você capturar as teclas, nesse link tem a numeração dos das teclas: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

 

ai um exemplo simples do que você precisa seria assim:

document.body.onkeypress = function(){
	var teclaClicada = event.keyCode;
        //console.log(event.keyCode);
        if(teclaClicada == "48"){ 
        // 48 =  0 
            console.log("Sua tecla é 0");
        }
};

Eu não testei, mais é basicamente isso ai vc pode utilizar loop e verificar as teclas e fazer executar sua função.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Quando eu seleciono algum numero no teclado virtual ele captura o valor do botão 1,2,3...mas não executa a máscara, será que o keycode resolve?

 

 

Douglas,

 

Tentei adaptar sua dica e não consegui, será que você conseguiria tentar adaptar seu exemplo somente no button 1 e testar se funciona?

 

Obrigado pela resposta!

 

 

Procurei alguns modelos e ainda não consegui encaixar, meu problema é que quando digito diretamente na caixa a máscara separa os digítos 9,999.99, mas quando digito com os botões ficam os números na caixa um do lado do outro, estou postando o código completo alterado, se alguém puder testar e ver se consegue adaptar a função MascaraMoeda nos botões eu agradeço.

 

<form>[/size]

<table[/size] [/size]cellpadding[/size]=[/size]"2"[/size] [/size]cellspacing[/size]=[/size]"2"[/size] [/size]border[/size]=[/size]"0"[/size]>[/size]

<tr>[/size]

<td[/size] [/size]colspan[/size]=[/size]"3"[/size] [/size]align[/size]=[/size]"center"[/size]><input[/size] [/size]type[/size]=[/size]"text"[/size] [/size]id[/size]=[/size]"valor"[/size] [/size]onKeyPress[/size]=[/size]"[/size]return[/size]([/size]MascaraMoeda[/size]([/size]this[/size],[/size]'.'[/size],[/size]','[/size],[/size]event[/size]))[/size]"[/size] [/size]size[/size]=[/size]"35"[/size]></td>[/size]

 

</tr>[/size]

<tr>[/size] [/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"1"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"2"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"3"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size]

</tr>[/size]

<tr>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"4"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"5"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"6"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size] [/size]

</tr>[/size]

<tr>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"7"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"8"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"9"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size] [/size]

</tr>[/size]

<tr>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"0"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size]

<td><input[/size] [/size]type[/size]=[/size]"button"[/size] [/size]value[/size]=[/size]"C"[/size] [/size]style[/size]=[/size]"[/size]font[/size]-[/size]size[/size]:[/size]25px[/size];[/size]"[/size] [/size]onClick[/size]=[/size]addNumber[/size]([/size]this[/size]);[/size] [/size]></td>[/size] [/size]

</tr>[/size]

</table>[/size]

</form>[/size]

 

JavaScript[/size]

function[/size] addNumber[/size]([/size]element[/size]){[/size]

return[/size]([/size]MascaraMoeda[/size]([/size]document[/size].[/size]getElementById[/size]([/size]'valor'[/size]).[/size]value [/size]=[/size] document[/size].[/size]getElementById[/size]([/size]'valor'[/size]).[/size]value[/size]+[/size]element[/size].[/size]value[/size],[/size]','[/size],[/size]'.'[/size],[/size]event[/size]));[/size]

 

}[/size]

 

function[/size] [/size]MascaraMoeda[/size]([/size]objTextBox[/size],[/size] [/size]SeparadorMilesimo[/size],[/size] [/size]SeparadorDecimal[/size],[/size] e[/size]){[/size]

var[/size] sep [/size]=[/size] [/size]0[/size];[/size]

var[/size] key [/size]=[/size] [/size]''[/size];[/size]

var[/size] i [/size]=[/size] j [/size]=[/size] [/size]0[/size];[/size]

var[/size] len [/size]=[/size] len2 [/size]=[/size] [/size]0[/size];[/size]

var[/size] strCheck [/size]=[/size] [/size]'0123456789'[/size];[/size]

var[/size] aux [/size]=[/size] aux2 [/size]=[/size] [/size]''[/size];[/size]

var[/size] whichCode [/size]=[/size] [/size]([/size]window[/size].[/size]Event[/size])[/size] [/size]?[/size] e[/size].[/size]which [/size]:[/size] e[/size].[/size]keyCode[/size];[/size]

if[/size] [/size](([/size]whichCode [/size]==[/size] [/size]13[/size])[/size] [/size]||[/size] [/size]([/size]whichCode [/size]==[/size] [/size]0[/size])[/size] [/size]||[/size] [/size]([/size]whichCode [/size]==[/size] [/size]8[/size]))[/size] [/size]return[/size] [/size]true[/size];[/size]

key [/size]=[/size] [/size]String[/size].[/size]fromCharCode[/size]([/size]whichCode[/size]);[/size] [/size]

if[/size] [/size]([/size]strCheck[/size].[/size]indexOf[/size]([/size]key[/size])[/size] [/size]==[/size] [/size]-[/size]1[/size])[/size] [/size]return[/size] [/size]false[/size];[/size]

len [/size]=[/size] objTextBox[/size].[/size]value[/size].[/size]length[/size];[/size]

for[/size]([/size]i [/size]=[/size] [/size]0[/size];[/size] i [/size]<[/size] len[/size];[/size] i[/size]++)[/size]

if[/size] [/size](([/size]objTextBox[/size].[/size]value[/size].[/size]charAt[/size]([/size]i[/size])[/size] [/size]!=[/size] [/size]'0'[/size])[/size] [/size]&&[/size] [/size]([/size]objTextBox[/size].[/size]value[/size].[/size]charAt[/size]([/size]i[/size])[/size] [/size]!=[/size] [/size]SeparadorDecimal[/size]))[/size] [/size]break[/size];[/size]

aux [/size]=[/size] [/size]''[/size];[/size]

for[/size](;[/size] i [/size]<[/size] len[/size];[/size] i[/size]++)[/size]

if[/size] [/size]([/size]strCheck[/size].[/size]indexOf[/size]([/size]objTextBox[/size].[/size]value[/size].[/size]charAt[/size]([/size]i[/size]))!=-[/size]1[/size])[/size] aux [/size]+=[/size] objTextBox[/size].[/size]value[/size].[/size]charAt[/size]([/size]i[/size]);[/size]

aux [/size]+=[/size] key[/size];[/size]

len [/size]=[/size] aux[/size].[/size]length[/size];[/size]

if[/size] [/size]([/size]len [/size]==[/size] [/size]0[/size])[/size] objTextBox[/size].[/size]value [/size]=[/size] [/size]''[/size];[/size]

if[/size] [/size]([/size]len [/size]==[/size] [/size]1[/size])[/size] objTextBox[/size].[/size]value [/size]=[/size] [/size]'0'[/size]+[/size] [/size]SeparadorDecimal[/size] [/size]+[/size] [/size]'0'[/size] [/size]+[/size] aux[/size];[/size]

if[/size] [/size]([/size]len [/size]==[/size] [/size]2[/size])[/size] objTextBox[/size].[/size]value [/size]=[/size] [/size]'0'[/size]+[/size] [/size]SeparadorDecimal[/size] [/size]+[/size] aux[/size];[/size]

if[/size] [/size]([/size]len [/size]>[/size] [/size]2[/size])[/size] [/size]{[/size]

aux2 [/size]=[/size] [/size]''[/size];[/size]

for[/size] [/size]([/size]j [/size]=[/size] [/size]0[/size],[/size] i [/size]=[/size] len [/size]-[/size] [/size]3[/size];[/size] i [/size]>=[/size] [/size]0[/size];[/size] i[/size]--)[/size] [/size]{[/size]

if[/size] [/size]([/size]j [/size]==[/size] [/size]3[/size])[/size] [/size]{[/size]

aux2 [/size]+=[/size] [/size]SeparadorMilesimo[/size];[/size]

j [/size]=[/size] [/size]0[/size];[/size]

}[/size]

aux2 [/size]+=[/size] aux[/size].[/size]charAt[/size]([/size]i[/size]);[/size]

j[/size]++;[/size]

}[/size]

objTextBox[/size].[/size]value [/size]=[/size] [/size]''[/size];[/size]

len2 [/size]=[/size] aux2[/size].[/size]length[/size];[/size]

for[/size] [/size]([/size]i [/size]=[/size] len2 [/size]-[/size] [/size]1[/size];[/size] i [/size]>=[/size] [/size]0[/size];[/size] i[/size]--)[/size]

objTextBox[/size].[/size]value [/size]+=[/size] aux2[/size].[/size]charAt[/size]([/size]i[/size]);[/size]

objTextBox[/size].[/size]value [/size]+=[/size] [/size]SeparadorDecimal[/size] [/size]+[/size] aux[/size].[/size]substr[/size]([/size]len [/size]-[/size] [/size]2[/size],[/size] len[/size]);[/size]

}[/size]

preco[/size]=[/size]objTextBox[/size].[/size]value[/size]

return[/size] [/size]false[/size];[/size]

}[/size]

 

 

 

End[/size] [/size]JavaScript[/size]

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi luciano, tem como você postar seu código novamente, para eu dar uma analisada direitinho?

Use a opção código nessa parte de cima, na formatação do seu texto.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.