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

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 .

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.

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.

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();
  }
});

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);
   }
});

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.

Você pode usar o plug - in Validação com seu método number () .

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

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 />

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)">

Como uma pequena melhoria para essa sugestão , você pode usar o plug - in Validação com seus métodos numéricos () , dígitos e intervalo . Por exemplo, o seguinte garante que você obtenha um número inteiro positivo entre 0 e 50:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

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, ''));
});

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.

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();
  }
});

   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();

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/

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.

/ * 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();
            }
        }

  });

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

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!

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]*$/);

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.

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)'

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.

Encontrei uma ótima solução aqui http://ajax911.com/numbers-numeric-field-jquery/

Acabei de alterar o "keyup" para "keydown" conforme minha exigência

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.

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

Acabei de encontrar um plug-in ainda melhor. Dá muito mais controle. Digamos que você tenha um campo DOB em que você precisa ser numérico, mas também aceita caracteres "/" ou "-".

Funciona muito bem!

Confira em http://itgroup.com.ph/alphanumeric/ .

    $(".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;)

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

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; 
  }
});