Uma necessidade bem comum em sistemas comerciais voltados para web é a validação/consistência de valores inseridos em campos ou controles. Porém, como sabemos, os controles HTML e seu contexto são bem, digamos, “traiçoeiros”.
Não temos neles toda a riqueza de uma interface gráfica ou um controle efetivo de seus eventos. Mas como o Javascript tem se tornado cada vez mais indispensável na construção desses sistemas, mesmo não tendo que sê-lo, nada como apelar para ele em casos como esse.
A função disponibilizada abaixo garante por meio do onkeydown evento Javascript que somente valores numéricos sejam digitados em um campo texto.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | /* * função para permitir a digitação de números decimais e inteiros */ function ForceNumericInput(event, This, AllowDecimal, AllowMinus) { if(arguments.length == 1) { var s = This.value; // garante que o sinal de "-" seja o primeiro do índice var i = s.lastIndexOf("-"); if(i == -1) return; if(i != 0) This.value = s.substring(0,i)+s.substring(i+1); return; } switch(event.keyCode) { case 8: // backspace case 9: // tab case 37: // left arrow case 39: // right arrow case 46: // delete event.returnValue = true; return; } if(event.keyCode == 189) // sinal de número de negativo { if(AllowMinus == false) { CancelEventExecution(event); return; } // aguarda até que o controle tenha sido atualizado var s = "ForceNumericInput(document.getElementById('"+This.id+"'))"; setTimeout(s, 250); return; } if(AllowDecimal && event.keyCode == 188) { if(This.value.indexOf(",") >= 0) { // restringe a digitação de apenas uma vírgula CancelEventExecution(event); return; } event.returnValue = true; return; } // permite caracteres entre 0 e 9 if(event.keyCode >= 48 && event.keyCode <= 57) { event.returnValue = true; return; } CancelEventExecution(event); } /* * Cancela a execução de uma function mapeada por um evento */ function CancelEventExecution(event) { if (navigator.appName == "Netscape") { event.preventDefault(); } else { event.returnValue = false; } } |
Para aplicar a função em um controle input, as opções seriam as seguintes:
Para permitir a digitação de números inteiros de decimais positivos ou negativos
1 2 | <input type="text" name="TextBoxNumeric" id="TextBoxNumeric" value="" onkeydown="ForceNumericInput(event, this, true, true)" /> |
Para permitir a digitação de inteiros positivos ou negativos
1 2 | <input type="text" name="TextBoxNumeric" id="TextBoxNumeric" value="" onkeydown="ForceNumericInput(event, this, false, true)" /> |
Para permitir a digitação de inteiros e decimais positivos
1 2 | <input type="text" name="TextBoxNumeric" id="TextBoxNumeric" value="" onkeydown="ForceNumericInput(event, this, true, false)" /> |
Para permitir a digitação de somente inteiros positivos
1 2 | <input type="text" name="TextBoxNumeric" id="TextBoxNumeric" value="" onkeydown="ForceNumericInput(event, this, false, false)" /> |
A função acima tem como base um exemplo postado no site CodeProject (http://www.codeproject.com/KB/scripting/JavaScriptForceNumInput.aspx), porém, com a limitação de funcionar apenas no Internet Explorer.
Foram aplicadas algumas correções como a permissão de navegar por meio da tecla TAB, o que não estava previsto na função original. A função CancelEventExecution foi criada para garantir o cancelamento da execução do evento em navegadores não Internet Explorer. também foi necessário adicionar o parâmetro event, que é implícito no nvagedor da Microsoft, mas precisa ser informada nos demais.
Com isso, a função passar a funcionar corretamente na maior parte dos navegadores.
Aplicando ao função no ASP.NET
Abaixo segue um pequeno exemplo de como aplicar esta função a um controle TextBox no ASP.NET:
1 2 3 | TextBox.Attributes.Add("onkeydown", string.Format( "ForceNumericInput(event, this, {0}, {1});", true.ToString().ToLower(), true.ToString().ToLower())); |
Abraços
Tomás
como habilito o teclado numerico? so estao funcionando os numeros da parte superior do teclado… abraço!
ja descobri… adicionei isso:
|| event.keyCode >= 96 && event.keyCode <= 105
porém está permitindo o uso de ` (crase) e ‘ “aspas simples”…
também permite o uso de SHIFT e ALT, permitindo digitar ~!@#%^&*()_+” e também ¡²¤€¼½¾‘’¥×´
Bruno,
Percebi os erros. A maioria acontece quando da combinação de teclas, principalmente do uso da tecla shift. Abaixo segue o código corrigido:
function ForceNumericInput(event, This, AllowDecimal, AllowMinus)
{
if(arguments.length == 1)
{
var s = This.value;
// if “-” exists then it better be the 1st character
var i = s.lastIndexOf(“-“);
if(i == -1)
return;
if(i != 0)
This.value = s.substring(0,i)+s.substring(i+1);
return;
}
switch(event.keyCode)
{
case 8: // backspace
case 9: // tab
case 37: // left arrow
case 39: // right arrow
case 46: // delete
event.returnValue = true;
return;
}
if(event.keyCode == 189) // minus sign
{
if(AllowMinus == false)
{
CancelEventExecution(event);
return;
}
// wait until the element has been updated to see if the minus is in the right spot
var s = “ForceNumericInput(document.getElementById(‘”+This.id+”‘))”;
setTimeout(s, 250);
return;
}
if(AllowDecimal && event.keyCode == 188 && !event.shiftKey)
{
if(This.value.indexOf(“,”) >= 0)
{
// don’t allow more than one dot
CancelEventExecution(event);
return;
}
event.returnValue = true;
return;
}
// allow character of between 0 and 9
if (!event.shiftKey)
{
if(event.keyCode >= 48 && event.keyCode <= 57)
{
event.returnValue = true;
return;
}
}
CancelEventExecution(event);
}
Valeu pelo toque. Se tiver mais sugestões, é só falar!
Abraços
Tomás
isso não é mais facil:
Pedro,
Independente da solução colocada, hoje eu uso jquery para a tarefa. Recomendo. Talvez escreva sobre no blog em breve.
Abraços
Tomás
Simplesmente, não funciona!
Agradeço a dica Lucas, mas o que exatamente não funciona?
Abraços
Tomás