A entrada de texto HTML permite apenas entrada numérica

852

Existe uma maneira rápida de definir uma entrada de texto HTML ( <input type=text />) para permitir apenas pressionamentos numéricos (mais '.')?

Julius A
fonte
81
Muitas soluções aqui funcionam apenas quando as teclas são pressionadas. Isso falhará se as pessoas colarem texto usando o menu ou se arrastarem e soltarem texto na entrada de texto. Eu já fui mordido por isso antes. Seja cuidadoso!
Bennett McElwee
83
@ JuliusA - você sempre precisa sempre de validação no servidor.
Stephen P
46
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
Droogans
14
Os @Droogans notam que também desabilita qualquer outra tecla, como TAB, para ir para a próxima entrada ou qualquer outro atalho não diretamente envolvido com a entrada como cmd + R para atualizar o site, se a entrada estiver focada.
Alejandro Pérez
1
Se você concorda com o Plugin, use NumericInput. Demonstração: jsfiddle.net/152sumxu/2 Mais detalhes aqui stackoverflow.com/a/27561763/82961
Faiz

Respostas:

1137

Nota: Esta é uma resposta atualizada. Os comentários abaixo se referem a uma versão antiga que mexia com códigos de chave.

Javascript

Tente você mesmo no JSFiddle .

Você pode filtrar os valores de entrada de um texto <input>com a seguinte setInputFilterfunção (suporta Copiar + Colar, Arrastar + Soltar, atalhos de teclado, operações do menu de contexto, teclas não tipificáveis, posição do cursor, layouts de teclado diferentes e todos os navegadores desde o IE 9 ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

Agora você pode usar a setInputFilterfunção para instalar um filtro de entrada:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

Veja a demonstração do JSFiddle para obter mais exemplos de filtros de entrada. Observe também que você ainda deve fazer a validação no servidor!

TypeScript

Aqui está uma versão TypeScript disso.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

Há também uma versão jQuery disso. Veja esta resposta .

HTML 5

O HTML 5 possui uma solução nativa com <input type="number">(consulte a especificação ), mas observe que o suporte ao navegador varia:

  • A maioria dos navegadores apenas validará a entrada ao enviar o formulário e não ao digitar.
  • A maioria dos navegadores móveis não suportam os step, mine maxatributos.
  • O Chrome (versão 71.0.3578.98) ainda permite ao usuário inserir os caracteres ee Eentrar no campo. Veja também esta pergunta .
  • O Firefox (versão 64.0) e o Edge (EdgeHTML versão 17.17134) ainda permitem que o usuário insira qualquer texto no campo.

Experimente você mesmo em w3schools.com .

emkey08
fonte
4
Embora isso seria uma boa escolha, isso ainda permite inserir caracteres como /, vários pontos, outros operadores etc.
Mahendra Liya
6
Ainda não é suportado pelo Firefox 21 (eu nem sequer falar sobre IE9 ou versão anterior ...)
JBE
67
O número do tipo de entrada não deve ser usado para fazer com que sua entrada aceite apenas números. É destinado a entradas que especificam um 'número de itens'. O Chrome, por exemplo, adiciona duas pequenas setas para aumentar ou diminuir o número em um. Uma entrada apenas numérica adequada é um tipo de omissão ridícula ao HTML.
Erwin
9
O type = "number" na verdade não impede a inserção de texto inválido no campo; parece que você pode até cortar e colar dados de lixo no campo, mesmo no chrome.
perfeccionista
6
A única coisa que eu acrescentaria a isso é alterar a linha Ctrl + A para incluir os usuários do MacOSX:(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))
MForMarlon 17/15/15
281

Use este DOM

<input type='text' onkeypress='validate(event)' />

E esse script

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}
geowa4
fonte
12
configurações alemãs em um eeepc 900. algumas teclas para uma boa utilização não funcionam: - backspace (keyCode: 8) - tecla de navegação esquerda e direita (keyCode: 37, 38) copiar e colar também é possível ...
Michael Piendl
11
A maioria das pessoas se importa, o fato de um erro de script aparecer reflete mal em seu site.
Robert Jeppesen
14
alguns problemas com este código. Pode entrar . mais de uma vez, segundo ele não permite excluir chave, alguma solução?
Coure2011
4
Eu me importava com backspace, delete e setas não funcionando. Se você remover "theEvent.keycode ||" e adicionar: "if (/ [- ~] / &&! Regex.test (key)) {", funcionará melhor (de qualquer maneira para ASCII / UTF). Mas não rejeitará caracteres chineses! :)
Sam Watkins
4
este permitir que alguém colar coisas aleatórias para a entrada
Vitim.us
137

Eu procurei muito e em busca de uma boa resposta para isso, e precisamos desesperadamente <input type="number", mas, além disso, essas 2 são as maneiras mais concisas que eu poderia ter:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

Se você não gosta do caractere não aceito exibido por uma fração de segundo antes de ser apagado, o método abaixo é minha solução. Observe as inúmeras condições adicionais, para evitar desativar todos os tipos de navegação e teclas de atalho. Se alguém souber compactar isso, avise-nos!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">
user235859
fonte
4
input type = "number" está chegando no HTML 5 - e você pode usar JavaScript como um polyfill substituto ... stevefenton.co.uk/Content/Blog/Date/201105/Blog/…
Fenton
5
Bom método mas pode ser quebrado por pressionando e mantendo uma tecla não-aceitável
Scott Brown
8
Alterar o regex para /[^\d+]/e funciona com mantendo
boecko
11
@ boecko obrigado por isso, mas observe que deveria ser /[^\d]+/. Boa solução embora. Também @ user235859
Mosselman
11
Ele queria permitir .também. Você deve realmente fazê-lo/[^0-9.]/g
Qsario
94

Aqui está um simples que permite exatamente um decimal, mas não mais:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

billynoah
fonte
12
Manipuladores: copiar + colar, arrastar e soltar, permite apenas 1 decimal, tabulação, exclusão e backspace - use este
Mathemats
Essa lógica dentro da entrada pode ser extraída para que possa ser usada globalmente?
ema
@ema - sim, veja minha outra resposta aqui, que mostra como você pode aplicar a regra usando a classe.
precisa saber é
se você usar isso no formato angular, o valor não será atualizado no valor de controle do formulário.
Ale_info
Impressionante. Altero o evento para this.value = this.value.replace (/ [^ 0-9 .-] / g, '') .replace (/(\..*)\./ g, '$ 1'). substitua (/ ^ 0 + / g, ''). substitua (/ (? <! ^) - / g, ''); Dessa forma, ele lida apenas com - no início e não permite zeros no início do número.
brenth 17/07/19
54

E mais um exemplo, que funciona muito bem para mim:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

Anexar também ao evento de pressionamento de tecla

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

E HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

Aqui está um exemplo do jsFiddle

Vasyl
fonte
E o texto colado?
Jason Ebersey
Por que obtenho "evento não definido" quando chamo essa função?
Vincent
1
isso não funciona no Firefox quando o event.keyCode sempre é retornado 0. Corrigi com o novo código: function validateNumber (event) {var key = event.which || event.charCode || event.keyCode || 0; if (chave == 8 || chave == 46 || chave == 37 || chave == 39) {return true; } senão se (chave <48 || chave> 57) {retornar false; } retornar verdadeiro; };
Luan Nguyen
1
Como Jessica disse, você pode adicionar apóstrofo e até sinal de porcentagem.
Alejandro Nava
1
Muito perto! mas permite mais de um decimal.
Kross
52

O HTML5 possui <input type=number>, o que parece certo para você. Atualmente, apenas o Opera suporta nativamente, mas há um projeto que possui uma implementação em JavaScript.

Ms2ger
fonte
Aqui está um documento que define quais navegadores suportam esse atributo: caniuse.com/input-number . Até o momento, o Chrome e o Safari suportam totalmente esse campo de tipo. O IE 10 tem suporte parcial e o Firefox não tem suporte.
23413 Nathan Wallace
O único problema com type=numberisso é que não é suportado pelo IE9
J Rod
@JRod Existe um polyfill para o IE antigo. Mais informações aqui .
Jkdev 07/07
6
O primeiro problema é type=numberpermitir o ecaracter porque é considerado e+10como número. O segundo problema é que você não pode limitar o número máximo de caracteres na entrada.
Hakan Fıstık
Outro problema é que, se o tipo é número, não consigo obter os benefícios de definir o tipo como, por exemplo: "tel".
ScottyBlades
49

A maioria das respostas aqui tem a fraqueza de usar eventos-chave .

Muitas das respostas limitariam sua capacidade de fazer a seleção de texto com macros do teclado, copiar + colar e mais comportamentos indesejados; outras parecem depender de plugins jQuery específicos, que estão matando moscas com metralhadoras.

Esta solução simples parece funcionar melhor para mim em várias plataformas, independentemente do mecanismo de entrada (pressionamento de tecla, copiar + colar, clicar com o botão direito do mouse em copiar + colar, falar com texto etc.). Todas as macros do teclado de seleção de texto ainda funcionariam e até limitariam a capacidade de definir um valor não numérico por script.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);
EJTH
fonte
É necessário o jQuery 1.7+. Esta é uma resposta mais completa, pois leva em consideração as entradas via "cópia". E também é mais simples!
Memochipan
Uma regex alternativa: replace(/[^\d]+/g,'')substitua todos os que não sejam dígitos por uma sequência vazia. O modificador "i" (que não diferencia maiúsculas de minúsculas) não é necessário.
Memochipan
Este deve estar no topo, uma vez que "onkey" manipuladores de eventos em uma tag não deve ser propagada mais ...
gpinkas
Esta é definitivamente a melhor resposta aqui, mas não permite dígitos com números decimais. Alguma idéia de como isso poderia funcionar?
Atirag 04/09/16
6
@Atirag Se você quiser decimais, poderá alterar o regex/[^\d,.]+/
EJTH 5/16
41

Optei por usar uma combinação das duas respostas mencionadas aqui, ie

<input type="number" />

e

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

Mahendra
fonte
Excelente resposta ... +1. Você também pode reduzir a declaração se a: return !(charCode > 31 && (charCode < 48 || charCode > 57));
Schadeck
7
Que tal excluir? Você quer números, mas você provavelmente vai querer que as pessoas sejam capazes de corrigi-los sem atualizar a página ...
Martin Erlic
40

O HTML5 suporta regexes, para que você possa usar isso:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

Aviso: alguns navegadores ainda não são compatíveis.

james.garriss
fonte
7
HTML5 também tem <input type=number>.
Mathias Bynens 18/10/11
Verdade. Você deve fazer disso uma resposta. Opa, @ Ms2ger já tem.
James.garriss
O <input type = number> acrescenta setas para aumentar e diminuir em determinados navegadores para que esta parece ser uma boa solução quando queremos evitar o spinner
Ayrad
35
O padrão é verificado apenas no envio. Você ainda pode inserir letras.
Erwin
O que os +meios no padrão atribuem?
PlanetHackers
18

Javascript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

adicional, você pode adicionar vírgula, ponto e menos (, .-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >
patrick
fonte
Não funciona corretamente nos teclados em que é necessário usar a tecla Shift para inserir um número (por exemplo, teclado AZERTY europeu).
Captain Sensible
obrigado cara, você realmente entende uma pergunta! Bom exemplo e manipulação fora do curso. ou, (que a maioria das pessoas querem se eles trabalham com números)
real_yggdrasil
Este é o único que funciona que evita colar valores não numéricos.
DREK LEE
16

Tão simples....

// Em uma função JavaScript (pode usar HTML ou PHP).

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Na sua entrada de formulário:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

Com entrada max. (Estes acima permitem um número de 12 dígitos)

Rizal Aditya
fonte
Não faça isso! Isso bloqueia tudo, numpad, teclas de seta, tecla Delete, atalhos (CTRL + A, CTRL + R, por exemplo), até a tecla TAB é MUITO irritante!
21413 Korri
@ Korri Eu não sigo, qual parece ser o problema? Funcionou bem no meu caso.
Uneakharsh 28/03
primeira linha deve ser alterada para:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F. 17/07
15

2 soluções:

Use um validador de formulário (por exemplo, com o plugin de validação jQuery )

Faça uma verificação durante o evento onblur (ou seja, quando o usuário sair do campo) do campo de entrada, com a expressão regular:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>
romaintaz
fonte
Curiosamente, eu tive que dar o regex é "^ \\ d \\.? \\ d * $", mas isso pode ser porque a página é executada através de uma transformação XSLT.
Paul Tomblin
Eu acho que a expressão regular está incorreta. Eu usei esta linha:var regExpr = /^\d+(\.\d*)?$/;
costa
@ Costa não tem certeza, se o usuário deseja inserir .123(em vez de 0.123), por exemplo?
Romain Linsolas
@romaintaz. Você está certo, mas precisará alterar a expressão regular para garantir que, caso não haja dígito na frente do ponto, haja dígitos após o ponto. Algo parecido com isto: var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;.
costa
14

Uma abordagem mais segura é verificar o valor da entrada, em vez de seqüestrar as teclas pressionadas e tentar filtrar os códigos-chave.

Dessa forma, o usuário é livre para usar setas do teclado, teclas modificadoras, backspace, excluir, usar barras de teclado fora do padrão, usar o mouse para colar, usar arrastar e soltar texto e até mesmo entradas de acessibilidade.

O script abaixo permite números positivos e negativos

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

Edição: Eu removi minha resposta antiga porque acho que é antiquada agora.

Vitim.us
fonte
Este fato parece abranger a maioria dos casos
Zia Ul Rehman Mughal
13

Você pode usar o padrão para isso:

<input id="numbers" pattern="[0-9.]+" type="number">

Aqui você pode ver as dicas completas da interface do site para celular .

Ashisha Nautiyal
fonte
Não funciona no IE8 e 9. Veja caniuse . Ainda é uma boa resposta.
aloisdg movendo-se para codidact.com
Você também pode adicionar um title = "apenas números" para exibir o erro
thouliha
13

Por favor, encontre a solução abaixo mencionada. Neste usuário pode ser capaz de entrar somente numericvalor, também usuário não pode ser capaz de copy, paste, drage dropna entrada.

Caracteres permitidos

0,1,2,3,4,5,6,7,8,9

Não é permitido personagens e personagens através de eventos

  • Valor alfabético
  • Caracteres especiais
  • cópia de
  • Colar
  • Arrasto
  • Solta

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

Deixe-me saber se não funcionar.

Shyam Shingadiya
fonte
11

Se você deseja sugerir ao dispositivo (talvez um celular) entre alfa ou numérico, você pode usar <input type="number">.

Steven
fonte
11

Mais um exemplo em que você pode adicionar apenas números no campo de entrada, não pode letras

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
Mile Mijatović
fonte
10

Uma implementação curta e agradável usando jQuery e replace () em vez de olhar para event.keyCode ou event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Apenas um pequeno efeito colateral que a letra digitada aparece momentaneamente e CTRL / CMD + A parece se comportar um pouco estranho.

Tarmo
fonte
9

input type="number" é um atributo HTML5.

No outro caso, isso ajudará você:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>
Vaishali Tekale
fonte
primeira linha deve ser alterada para:var charCode = (evt.which) ? evt.which : evt.keyCode;
peiman F. 17/07
9

Código JavaScript:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

Código HTML:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

funciona perfeitamente porque o código de backspace é 8 e uma expressão regex não permite, por isso é uma maneira fácil de ignorar o bug :)

AirWolf
fonte
9

Uma maneira fácil de resolver esse problema é implementar uma função jQuery para validar com regex os caracteres digitados na caixa de texto, por exemplo:

Seu código html:

<input class="integerInput" type="text">

E a função js usando jQuery

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });
<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

AleKennedy
fonte
8

Apenas uma outra variante do jQuery usando

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});
Shurok
fonte
8

basta usar type = "number" agora esse atributo é suportado na maioria dos navegadores

<input type="number" maxlength="3" ng-bind="first">
Sai Gopi N
fonte
Não verifiquei se os dados são --1(2 caracteres antes de 1).
Ngoc Nam
6

Você também pode comparar o valor de entrada (que é tratado como string por padrão) com ele próprio forçado como numérico, como:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

No entanto, você precisa vincular isso ao evento, como keyup etc.

cincplug
fonte
6
<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>
Código de void
fonte
6

Vi algumas ótimas respostas, no entanto, gosto delas o mais pequenas e simples possível, por isso talvez alguém se beneficie disso. Eu usaria javascript Number()e isNaNfuncionalidade como esta:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Espero que isto ajude.

Sicha
fonte
1
Eu amo isto! Uma solução tão elegante, sem regex envolvido.
Levi Roberts
Esta não é uma resposta para a pergunta, o OP pediu para permitir apenas texto em uma entrada, e não verificar posteriormente.
Timberman 20/01
Sim, isso é verdade! Mas já existe uma resposta aceita que eu acho boa, mas achei que isso poderia ajudar alguém, além de ser agradável e limpo.
Sicha 24/01
5

Use este DOM:

<input type = "text" onkeydown = "validate(event)"/>

E este script:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... OU esse script, sem indexOf, usando dois for's ...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Eu usei o atributo onkeydown em vez de onkeypress, porque o atributo onkeydown é verificado antes do atributo onkeypress. O problema estaria no navegador Google Chrome.

Com o atributo "onkeypress", o TAB seria incontrolável com "preventDefault" no google chrome, no entanto, com o atributo "onkeydown", o TAB se tornará controlável!

Código ASCII para TAB => 9

O primeiro script tem menos código que o segundo, no entanto, a matriz de caracteres ASCII deve ter todas as chaves.

O segundo script é muito maior que o primeiro, mas a matriz não precisa de todas as chaves. O primeiro dígito em cada posição da matriz é o número de vezes que cada posição será lida. Para cada leitura, será incrementado 1 para o próximo. Por exemplo:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




No caso de chaves numéricas, são apenas 10 (0 - 9), mas se fossem 1 milhão, não faria sentido criar uma matriz com todas essas chaves.

Códigos ASCII:

  • 8 ==> (Backspace);
  • 46 => (Excluir);
  • 37 => (seta esquerda);
  • 39 => (seta para a direita);
  • 48 - 57 => (números);
  • 36 => (casa);
  • 35 => (final);
Daniel
fonte
5

Esta é uma função aprimorada:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}
Ehsan Chavoshi
fonte
4

A melhor maneira (permitir TODOS os tipos de números - negativo real, positivo real, zero negativo, positivo inteiro) é:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 
koolo90
fonte
4

Esta é a versão estendida da solução da geowa4 . Suportes mine maxatributos. Se o número estiver fora da faixa, o valor anterior será mostrado.

Você pode testá-lo aqui.

Uso: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

Se as entradas são dinâmicas, use isto:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});
user669677
fonte
@UserB isso não deve excluir nada.