Tag Archives: onkeydown

Javascript – Campo texto permitindo somente digitação de números

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