jQuery: qual é a melhor maneira de restringir a entrada "número" apenas para caixas de texto? (permitir pontos decimais)


228

Qual é a melhor maneira de restringir a entrada "número" apenas para caixas de texto?

Estou procurando algo que permita pontos decimais.

Eu vejo muitos exemplos. Mas ainda temos que decidir qual usar.

Atualização de Praveen Jeganathan

Chega de plugins, o jQuery implementou seus próprios jQuery.isNumeric()itens adicionais na v1.7. Consulte: https://stackoverflow.com/a/20186188/66767


3
Esta é uma pergunta baseada em opinião, mas muito útil. As perguntas baseadas em opinião devem ser permitidas. A pessoa que está procurando essas informações precisa apenas estar ciente de que se trata apenas de respostas baseadas em opiniões. Um TAG seria suficiente.
Thiago C. S Ventura

Aqui está um bom artigo com demo ao vivo codepedia.info/…
Satinder singh

Respostas:


198

Atualizar

Existe uma solução nova e muito simples para isso:

Ele permite que você use qualquer tipo de filtro de entrada em um texto <input>, incluindo vários filtros numéricos. Isso manipulará corretamente Copiar + Colar, Arrastar e Soltar, atalhos de teclado, operações do menu de contexto, teclas não digitáveis ​​e todos os layouts de teclado.

Veja esta resposta ou tente você mesmo no JSFiddle .

plugin jquery.numeric

Implementei com sucesso muitos formulários com o plugin jquery.numeric .

$(document).ready(function(){
    $(".numeric").numeric();
});

Além disso, isso funciona com áreas de texto também!

No entanto, observe que Ctrl + A, Copiar + Colar (via menu de contexto) e Drag + Drop não funcionarão conforme o esperado.

HTML 5

Com um suporte mais amplo ao padrão HTML 5, podemos usar patternatributo e numbertipo para inputelementos para restringir a entrada apenas de número. Em alguns navegadores (principalmente no Google Chrome), ele também restringe a colagem de conteúdo não numérico. Mais informações numbere outros tipos de entrada mais recentes estão disponíveis aqui .


5
Este plugin não permite usar backspace no Opera.
Darryl Hein

6
@ Darryl a fonte tem apenas algumas dezenas de linhas, então eu tenho certeza que modificá-la para permitir que isso seja trivial. Eu apenas encontrei este plugin e o modifiquei para que agora haja uma allowDecimalopção sempre que eu quiser permitir valores inteiros .. a fonte é muito simples e bem escrita.
Earlz

1
Isso não funciona ao copiar e colar em campos de entrada que são de type="number".
Tallmaris 13/05

@ Tallmaris, essa é realmente uma pergunta e uma resposta muito antigas. Houve muitas alterações no HTML e deve ser considerado.
TheVillageIdiot

Olá @TheVillageIdiot, você está certo. Eu não queria parecer rude no comentário (o que provavelmente é um pouco seco) :) O fato é que vi alguns comentários recentes, então só queria esclarecer que essa provavelmente não é, no momento, a melhor solução para o problema. problema.
Tallmaris 14/05

288

Se você deseja restringir a entrada (em oposição à validação), você pode trabalhar com os principais eventos. algo assim:

<input type="text" class="numbersOnly" value="" />

E:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

Isso imediatamente informa ao usuário que eles não podem inserir caracteres alfa, etc., ou mais tarde, durante a fase de validação.

Você ainda deseja validar porque a entrada pode ser preenchida recortando e colando com o mouse ou, possivelmente, por um preenchimento automático de formulário que pode não acionar os principais eventos.


4
+1 - eu ia sugerir a mesma coisa. É um ponto muito bom observar que essa forma de validação pode ocorrer por pressionamento de tecla, em vez de uma vez no final. A única coisa que eu acrescentaria é alguma forma de alerta de que o que o usuário está digitando está sendo rejeitado. Simplesmente não mostrar as letras fará com que muitas pessoas pensem que seu teclado está quebrado. talvez altere sutilmente a cor do plano de fundo ou da borda .. desde que o usuário saiba que seu aplicativo está realmente fazendo alguma coisa.
nickf

acordado. Eu tenho um exemplo em tarbuilders.com . se você clicar em "contato", o formulário verificará rapidamente a entrada do usuário e, se for válido, haverá uma borda verde e uma marca de seleção. inválido -> vermelho e "x"
Keith Bentrup

5
Veja esta resposta para corrigir o problema da tecla de seta.
21713 Hanna

Observe que você ainda pode colar caracteres e letras com o botão direito do mouse, clicando em> colar. Uma maneira fácil de corrigir isso seria:$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
Rens Tillmann

1
Merda, se eu escrever os números, ou seja, "123" e pressione a tecla da letra, ou seja, "a" que esvaziar a entrada ...
candlejack

102

Eu pensei que a melhor resposta era a acima para fazer isso.

jQuery('.numbersOnly').keyup(function () {  
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

mas eu concordo que é um pouco doloroso que as teclas de seta e o botão excluir aponte o cursor para o final da string (e por isso foi retrocedido para mim nos testes)

Eu adicionei em uma simples mudança

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

Dessa forma, se houver algum pressionamento de botão que não fará com que o texto seja alterado, apenas o ignore. Com isso, você pode pressionar as setas e excluir sem pular para o final, mas ele limpa qualquer texto não numérico.


27
Para um melhor desempenho, crie um var com resultado de substituição em vez de executá-lo duas vezes.
DriverDan

4
keypresspoderia ser usado para simplificar ainda mais isso, porque, aparentemente, keyupe keydowngatilho em qualquer tecla do teclado, enquanto keypress apenas os gatilhos das chaves "caráter" (portanto, não provocando na seta e chaves de exclusão). Veja esta resposta para referência: stackoverflow.com/a/1367720/1298685
Ian Campbell

Está aceitando mais de um decimal. Como aceitar apenas um decimal. Eu solicitei o campo de texto da quantidade. Está levando 12.5.6 também. Como restringir para um ponto.
Niru dyogi

Pressionar a tecla @IanCampbell significa que você pode inserir um caractere para começar que não seja removido. Não vai funcionar. Keydown faz a mesma coisa. Só posso fazê-lo funcionar com keyup.
nickdnk

54

O plugin jquery.numeric possui alguns erros que eu notifiquei o autor. Ele permite vários pontos decimais no Safari e Opera, e você não pode digitar backspace, teclas de seta ou vários outros caracteres de controle no Opera. Eu precisava de entrada inteira positiva, então acabei escrevendo apenas a minha no final.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Não é possível inserir um 0 usando este código. Testado com Chrome e FF no Mac.
jaredstenquist

1
Eu atualizei isso para aceitar 0 dígito (48 == event.which && ($ (this) .val ()> 0)) || // Não 0 primeiro dígito
aljordan82 30/09

Esta é uma ótima solução, mas faltam decimais, basta adicionar (46 == event.which &&! ($ (This) .val (). Includes ("."))) ||
31416 DiamondDrake

Não é possível digitar 0.
PJ7

47

Chega de plugins, o jQuery implementou seu próprio jQuery.isNumeric () adicionado na v1.7.

jQuery.isNumeric( value )

Determina se o argumento é anumber.

Resultados das amostras

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

Aqui está um exemplo de como vincular isNumeric () ao ouvinte de evento

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

+1 para nenhum plug-in. Eu gostaria de adicionar uma pequena alteração para permitir que milhares se separem. No lugar de var v = this.value;alterá-lo para var v = this.value.replace(/,/g,'');. Números como 21,345,67.800também são considerados.
maan81

Alguém sabe como isso verifica os números? Ele usa códigos de chave ou expressões regulares? Importante se você considerar diferentes layouts de teclado.
Christopher Grigg

2
Isto está muito perto. No entanto, se você mantiver pressionada uma tecla de caractere, ela não executará a verificação corretamente. O personagem irá "correr". Em vez disso, tente o seguinte: $(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } });
Gwi7d31 16/08

34

O plug-in numérico () mencionado acima, não funciona no Opera (você não pode voltar atrás, excluir ou usar as teclas voltar ou avançar).

O código abaixo em JQuery ou Javascript funcionará perfeitamente (e são apenas duas linhas).

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

Obviamente, isso é apenas para entrada numérica pura (além das teclas backspace, delete, forward / back), mas pode ser facilmente alterado para incluir pontos e caracteres negativos.


numpad também não é permitido
Graham


18

Não há necessidade do código longo para restrição de entrada de número, apenas tente este código.

Também aceita int e float válidos para ambos os valores.

Abordagem Javascript

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Abordagem jQuery

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

ATUALIZAR

As respostas acima são para os casos de uso mais comuns - validando a entrada como um número.

Mas abaixo está o trecho de código para casos de uso especiais

  • Permitindo números negativos
  • Mostrando o pressionamento de tecla inválido antes de removê-lo.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />


14

Abaixo está o que eu uso para literalmente bloquear as teclas digitadas. Isso permite apenas números de 0 a 9 e um ponto decimal. Fácil de implementar, sem muito código e funciona como um encanto:

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

<input value="" onkeypress="return isNumberKey(event)">

Se alguém estiver se perguntando, você pode restringir decimais removendo charCode != 46da instrução if. Ótima resposta!
Gaʀʀʏ

Exatamente, eu removi o charCode! = 46 para pular decimais. Obrigado kaleazy, esta resposta funcionou muito bem para mim.
msqar

3
Esta é uma péssima solução, pois não leva em consideração o retrocesso, as setas, as teclas de controle e outras teclas necessárias.
precisa saber é o seguinte

Acabei de publicar uma solução semelhante a essa, mas também lida com backspace, setas e não usa códigos de chave codificados. Confira aqui: stackoverflow.com/a/23468513/838608
Håvard Geithus


9

Você não vê a aparência e o desaparecimento mágicos dos alfabetos na tecla para baixo. Isso funciona na pasta do mouse também.

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Apesar de não permitir decimais, achei o método mais simples para números inteiros.
nickdnk

Para decimal, você provavelmente pode atualizar o regex para algo como/[^0-9.]/g
Null Head

Eu não preciso de decimais. Foi só porque OP fez, mas sim :)
nickdnk

8

Tentei resolver isso usando o jQuery pela primeira vez, mas não estava feliz com os caracteres indesejados (sem dígitos) que realmente apareciam no campo de entrada antes de serem removidos na inicialização.

Procurando outras soluções, encontrei o seguinte:

Inteiros (não negativos)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

Fonte: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Exemplo ao vivo: http://jsfiddle.net/u8sZq/

Pontos decimais (não negativos)

Para permitir um único ponto decimal, você pode fazer algo assim:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

Fonte: Acabei de escrever isso. Parece estar funcionando. Exemplo ao vivo: http://jsfiddle.net/tjBsF/

Outras personalizações

  • Para permitir que mais símbolos sejam digitados, adicione-os à expressão regular que está atuando como o filtro básico do código de caracteres.
  • Para implementar restrições contextuais simples, observe o conteúdo atual (estado) do campo de entrada (oToCheckField.value)

Algumas coisas que você poderia estar interessado em fazer:

  • Somente um ponto decimal permitido
  • Permitir sinal de menos somente se posicionado no início da string. Isso permitiria números negativos.

Deficiências

  • A posição do cursor não está disponível dentro da função. Isso reduziu bastante as restrições contextuais que você pode implementar (por exemplo, não existem dois símbolos consecutivos iguais). Não tenho certeza qual é a melhor maneira de acessá-lo.

Eu sei que o título pede soluções jQuery, mas espero que alguém ache isso útil de qualquer maneira.


6

Obrigado pelo post Dave Aaron Smith

Editei sua resposta para aceitar ponto decimal e número da seção de número. Este trabalho é perfeito para mim.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

6
   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

E aplique isso em todas as entradas que você deseja:

$('selector').ForceNumericOnly();

5

O HTML5 oferece suporte ao número do tipo de entrada, com suporte global a 88% do navegador, de acordo com o CanIUse em outubro de 2015.

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

Esta não é uma solução relacionada ao JQuery, mas a vantagem é que, nos telefones celulares, o teclado Android será otimizado para digitar números.

Como alternativa, é possível usar o texto do tipo de entrada com o novo parâmetro "padrão". Mais detalhes nas especificações do HTML5.

Eu acho que é melhor que a solução jquery, já que nesta questão, a solução jquery fornecida não suporta separador de milhares. Se você pode usar o html5.

JSFiddle: https://jsfiddle.net/p1ue8qxj/


4

Esta função faz a mesma coisa, usa algumas das idéias acima.

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});
  • mostrar feedback visual (a letra incorreta aparece antes de desaparecer)
  • permite decimais
  • captura vários "."
  • não tem problemas com esquerda / direita del etc.

4

/ * esta é a minha versão do navegador cruzado de Como permitir apenas numérico (0-9) na caixa de entrada HTML usando jQuery?
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

3

Basta executar o conteúdo através de parseFloat (). Ele retornará NaNcom entrada inválida.


3

Você pode usar o autoNumeric em decorplanit.com . Eles têm um bom suporte para numeração, moeda, arredondamento etc.

Eu usei em um ambiente IE6, com alguns ajustes de CSS, e foi um sucesso razoável.

Por exemplo, uma classe css numericInputpode ser definida e usada para decorar seus campos com as máscaras de entrada numéricas.

adaptado do site autoNumeric:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

autoNumeric é definitivamente o caminho a percorrer
Prethen

3

Eu acho que essa é uma boa maneira de resolver esse problema e é extremamente simples:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

Exemplo: JSFiddle

Cenários cobertos

As recomendações mais semelhantes aqui falham em pelo menos uma delas ou exigem muito código para cobrir todas essas situações.

  1. Permite apenas 1 ponto decimal.
  2. Permite home, ende as arrowchaves.
  3. Permite deletee backspacedeve ser usado em qualquer índice.
  4. Permite editar em qualquer índice (desde que a entrada corresponda ao regex).
  5. Permite ctrl + ve shift + insert para entrada válida (o mesmo com o botão direito + colar).
  6. Não pisca o valor do texto porque o keyupevento não é usado.
  7. Restaura a seleção após entrada inválida.

Cenários falharam

  • Iniciar 0.5e excluir apenas o zero não funcionará. Isso pode ser corrigido alterando a regex para /^[0-9]*\.?[0-9]*$/e adicionando um evento de desfoque para preceder a 0quando a caixa de texto começar com um ponto decimal (se desejado). Veja este cenário avançado para ter uma idéia melhor de como corrigir isso.

Plugar

Eu criei este plugin jquery simples para facilitar isso:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

2

A melhor maneira é verificar o conteúdo da caixa de texto sempre que ela perder o foco.

Você pode verificar se o conteúdo é um "número" usando uma expressão regular.

Ou você pode usar o plug-in Validação, que basicamente faz isso automaticamente.


A expressão regular seria /^\d*\.{0,1}\d+$/
Chetan S

2

Verifique este código de localização para uso do banco de dados:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

2

Este é um trecho que acabei de fazer (usando uma parte do código de Peter Mortensen / Keith Bentrup) para uma validação de porcentagem inteira em um campo de texto (o jQuery é necessário):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

Este código:

  • Permite usar as principais teclas numéricas e o teclado numérico.
  • Valida para excluir caracteres numéricos Shift (por exemplo, #, $,% etc.)
  • Substitui os valores de NaN por 0
  • Substitui por 100 valores maiores que 100

Espero que isso ajude os necessitados.



2

Se você estiver usando HTML5, não precisará se esforçar muito para realizar a validação. Apenas use -

<input type="number" step="any" />

O atributo step permite que o ponto decimal seja válido.


2
Não é assim, o Firefox e o Opera permitem a entrada de texto não numérico #
Michael Fever

@MichaelDeMutis você está certo, ele permite entrada de texto não numérico, mas falha na validação no FF (não tive a oportunidade de testar no Opera).
Jay Blanchard

2

Outra maneira de manter a posição do cursor na entrada:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

Vantagens:

  1. O usuário pode usar as teclas de seta, Backspace, Delete, ...
  2. Funciona quando você deseja colar números

Plunker: Demo working



1
    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Esse código funcionou muito bem em mim, eu apenas precisei adicionar o 46 no array controlKeys para usar o período, embora eu não ache que seja a melhor maneira de fazê-lo;)


1

Eu usei isso, com bons resultados ..

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

1

Isso é muito simples, pois já temos uma função embutida em javascript "isNaN".

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.