Como permitir apenas numérico (0-9) na caixa de entrada HTML usando jQuery?

901

Estou criando uma página da web em que tenho um campo de texto de entrada no qual desejo permitir apenas caracteres numéricos como (0,1,2,3,4,5 ... 9) 0-9.

Como posso fazer isso usando o jQuery?

Prashant
fonte
73
Lembre-se de que você não pode confiar na validação do lado do cliente - você também precisa validar no servidor caso o usuário tenha o JavaScript desativado ou não esteja usando um navegador compatível com JavaScript.
Cjk 15/06/09
45
você considerou html5? <input type = "number" />. com min e atributos max você pode restringir a entrada demasiado
ZX12R
5
Eu acho que você deve verificar os valores de entrada no evento keyup e não os códigos de chave, porque é muito mais confiável entre as diferenças nos teclados e o que não.
Richard
13
Concordo plenamente com Richard: não use códigos de chave. A resposta aceita não funciona em teclados franceses, por exemplo, pois você precisa pressionar "Shift" para digitar números nesses teclados. Os códigos-chave são muito arriscados, IMHO.
MiniQuark
3
@ ZX12R Não funciona em nenhuma versão atual do IE. É bom usar o código mais recente para se manter atualizado, mas isso não é realmente uma opção para quase qualquer projeto profissional. caniuse.com/#feat=input-number
Eric

Respostas:

1260

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

jQuery

Tente você mesmo no JSFiddle .

Não existe uma implementação nativa do jQuery para isso, mas você pode filtrar os valores de entrada de um texto <input>com o seguinte inputFilterplug-in (suporta Copiar + Colar, Arrastar + Soltar, atalhos de teclado, operações do menu de contexto, teclas não tipificáveis, posição do cursor, diferentes layouts de teclado e todos os navegadores desde o IE 9 ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", 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 = "";
      }
    });
  };
}(jQuery));

Agora você pode usar o inputFilterplug-in para instalar um filtro de entrada:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits 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!

JavaScript puro (sem jQuery)

O jQuery não é realmente necessário para isso. Você também pode fazer o mesmo com JavaScript puro. 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
45
Obrigado! event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 se você quiser decimais
Michael L Watson
9
Adicione os códigos 37 e 39 para permitir a navegação com as setas esquerda e direita na caixa txt, por exemplo: if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39)
Anthony Queen
22
ooo, acabamos de resolver um problema com nossos testadores. Você tem que impedir que o usuário segurando a tecla Shift e bater as teclas numéricas, caso contrário a entrada permitirá @ # $% ^ & * ()!
Allen Rice
6
Confirmado o turno + bug. Além disso, o teclado numérico ALT + permite praticamente qualquer coisa (por exemplo, Alt + 321 = A, Alt + 322 = B, etc ...). Outro caso para validação do lado do servidor.
Anthony Queen
140
Eu realmente discordo desta resposta: é realmente muito arriscado tocar com códigos de teclas, porque você não pode ter certeza de qual é o layout do teclado. Por exemplo, nos teclados franceses, os usuários precisam pressionar Shift para digitar números. Portanto, esse código não funcionará. Então, por favor, vá para a validação em vez deste código hackeado.
MiniQuark
182

Aqui está a função que eu uso:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

Você pode anexá-lo ao seu controle fazendo o seguinte:

$("#yourTextBoxName").ForceNumericOnly();
Kelsey
fonte
2
Eu achei isso útil, mas achei um "bug" irritante. quando eu uso isso no meu iMac, ele permite algumas letras, como a e e. parece que os números do teclado no PC são letras no iMac e o teclado do Mac é o mesmo que os números regulares. alguém sabe como fazê-lo funcionar tanto em mac e pc?
Volmar
3
As teclas "Início", "Final" também não estão funcionando. Esta é uma solução melhor do que Peter sugeriu: west-wind.com/weblog/posts/2011/Apr/22/...
bman
Por que existe um return this.each(function() ?
powtac 03/09/11
2
@powtac - para que você possa chamar .ForceNumericOnly () em vários objetos. Por exemplo ... $ ("input [type = 'text']"). ForceNumericOnly ()
Oliver Pearmain
1
@powtac a eachpartir de return this.each(function()é permitir que múltiplos objectos como referido HaggleLad, e a returnparte é para devolver o objecto novamente jQuery para o chamador, para permitir o encadeamento, tais como$("input[type='text'").ForceNumericOnly().show()
José Rui Santos
149

Na linha:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Estilo discreto (com jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

Patrick Fisher
fonte
2
Isso move o cursor até o fim, mesmo que o usuário esteja pressionando a tecla de seta para a esquerda.
Phrogz
1
@phrogz, tente o seguinte: onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')".
Patrick Fisher
Isso funciona perfeitamente e evita o número Shift + diferente dos acima.
Nick Hartley
5
@ mhenry1384 Esse é o comportamento esperado. Acho que é um bom feedback, mas se você não gostar, uma abordagem de código-chave seria o que você está procurando.
Patrick Fisher
2
Você pode modificar para /[^0-9]|^0+(?!$)/gimpedir séries iniciais de zero.
Johny Skovdal
105

Você pode usar apenas uma expressão regular JavaScript simples para testar caracteres puramente numéricos:

/^[0-9]+$/.test(input);

Isso retorna verdadeiro se a entrada for numérica ou falsa, se não.

ou para código-chave do evento, use simples abaixo:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }
Umang
fonte
11
Veja minha resposta para uma implementação dessa abordagem.
Patrick Fisher
levaria menos tempo do processador para verificar se havia uma tecla numérica em vez de verificar uma expressão regular?
andrsnn
87

Você pode usar no evento de entrada como este:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Mas, qual é esse privilégio de código?

  • Funciona em navegadores móveis (keydown e keyCode têm problema).
  • Também funciona em conteúdo gerado por AJAX, porque estamos usando "on".
  • Melhor desempenho que o keydown, por exemplo, no evento colar.
Hamid Afarinesh Far
fonte
6
Sinto que esta é uma solução muito mais robusta (e mais simples) do que a resposta aceita.
Jeremy Harris
Ainda mais simples se estiver usando replace (/ \ D / g, '')
Alfergon
oi, como posso garantir valor numérico com um decimalentre 0.0para 24.0eu sou incapaz de deixá-lo entrar no.
transformador de
Eu gostaria de sugerir o usothis.value = Number(this.value.replace(/\D/g, ''));
HasanG
Boa resposta, permite alternar facilmente se uma entrada é numérica ou não, alternando classe
#
55

Curto e doce - mesmo que isso nunca encontre muita atenção após mais de 30 respostas;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });
livrar Iculous
fonte
5
Eu substituiria keyup por input, caso contrário, você poderá manter uma letra pressionada e clicar para tirar o foco da caixa de texto e deixar o texto como está. entrada garantir que isso não pode acontecer
WizLiz
Obrigado pela regex - mas este é um manipulador de eventos um pouco melhor: $ ('# number_only'). On ('input propertychange', function () {this.value = this.value.replace (/ [^ 0-9] / g, '');});
precisa saber é
3
FYI - A pergunta não foi solicitada, mas isso não permite decimais (por exemplo, 12.75). Vincular "entrada" em vez de "keyup" cria um UX mais suave, em vez de ver seu caractere por uma fração de segundo e removê-lo.
Paul
44

Usar a função JavaScript isNaN ,

if (isNaN($('#inputid').val()))

if (isNaN (document.getElementById ('inputid'). val ())))

if (isNaN(document.getElementById('inputid').value))

Atualização: E aqui um bom artigo falando sobre isso, mas usando jQuery: Restringindo entrada em caixas de texto HTML para valores numéricos

Amr Elgarhy
fonte
40
Bem ... "Não usando JQuery" exceto a parte do seu exemplo que está usando JQuery ...
GalacticCowboy
document.getElementById('inputid').val()cara .. isso ainda é jquery. .val()é uma coisa jquery. use.value
mpen 18/03/19
oi, como posso garantir valor numérico com um decimalentre 0.0para 24.0eu sou incapaz de deixá-lo entrar no.
transformador de
28
$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Fonte: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Ivar
fonte
6
Uau, blocos "if" vazios e números mágicos! Vomitei um pouco na boca. : D Mas, falando sério, por que enfrentar todo esse problema quando você poderia simplesmente comparar a entrada com a expressão regular /^[.\d]+$/? E o que o '8' representa?
277 Alan Moore
@ Alan: Haha, eu não tenho idéia - copiei diretamente da fonte. Eu escreveria "if (event.keyCode! = 46 && event.keyCode! = 8)" ou use regex como você disse. Suponho que o 8 represente a tecla delete.
Ivar
4
Tente pressionar Shift + 8, por exemplo - a sua validação vai deixar * entrar em
Anton
Esta é nice.Would ser muito melhor, Se ele lida com os números tecla Shift + (caracteres especiais como @ # $% ^ ..!)
Shyju
27

Eu uso isso em nosso arquivo js comum interno. Acabei de adicionar a classe a qualquer entrada que precise desse comportamento.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
Mijk
fonte
1
Código agradável, elegante e útil! Obrigado. Mas você deve adicionar eventos de keyup e keydown.
Silvio Delgado
25

Um mais simples para mim é

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});
Summved Jain
fonte
7
Só precisa ter certeza de que você usar this.value.replace(/[^0-9\.]/g,'');para incluir requisitos de 0-9 OP
Chalise
24

Por que tão complicado? Você nem precisa do jQuery porque existe um atributo de padrão HTML5:

<input type="text" pattern="[0-9]*">

O legal é que ele traz um teclado numérico em dispositivos móveis, o que é muito melhor do que usar o jQuery.

hóspede
fonte
2
Isso deve ter muito mais votos. Se alguma coisa, você também pode adicionar um regex de retorno para navegadores não html5 - mas a validação de dados deve ser tratada de qualquer maneira pelo servidor.
Markus
parece que já está bem suportado pela maioria dos navegadores, então o suporte ao modernizr não é tão importante: caniuse.com/#search=pattern O Safari funciona muito bem, mesmo estando listado como parcialmente suportado neste site. Tente!
guest
@ Guest Muito obrigado por isso. Resposta mais rápida e fácil! Melhor resposta na minha opinião.
precisa saber é o seguinte
19

Você pode fazer o mesmo usando esta solução muito simples

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

Eu me referi a este link para a solução. Funciona perfeitamente!!!

Ganesh Babu
fonte
Talvez seja melhor /\d|\./ permitir. números decimais
Zango 9/10
Isso funciona perfeitamente no crome. Mas não no Mozilla FireFox
Kirataka 28/03
oi, como posso garantir valor numérico com um decimalentre 0.0para 24.0eu sou incapaz de deixá-lo entrar no.
transformador de
não funciona com copiar colar
mrid 19/04
14

Você pode tentar a entrada do número HTML5 :

<input type="number" value="0" min="0"> 

Para navegadores não compatíveis, existem fallbacks Modernizr e Webforms2 .

Vitalii Fedorenko
fonte
este ainda permite vírgulas de
apfz
14

O atributo padrão no HTML5 especifica uma expressão regular com a qual o valor do elemento é verificado.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

Nota: O atributo padrão funciona com os seguintes tipos de entrada: texto, pesquisa, url, tel, email e senha.

  • [0-9] pode ser substituído por qualquer condição de expressão regular.

  • {1,3} representa um mínimo de 1 e um máximo de 3 dígitos.

vickisys
fonte
oi, como posso garantir valor numérico com um decimalentre 0.0para 24.0eu sou incapaz de deixá-lo entrar no.
transformador de
1
@ transformador tente este <input type = "number" pattern = "[0-9] + ([\.,] [0-9] +)?" passo = "0,01">
vickisys 14/04
11

Algo bastante simples usando jQuery.validate

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
Adrian
fonte
8

função suppressNonNumericInput (evento) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}
user261922
fonte
oi, como posso garantir valor numérico com um decimalentre 0.0para 24.0eu sou incapaz de deixá-lo entrar no.
transformador de
8

Cheguei a uma solução muito boa e simples que não impede o usuário de selecionar texto ou copiar colar como outras soluções. estilo jQuery :)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
Vincent
fonte
Hey eu estou usando isso, mas o que eu realmente estou procurando é para permitir que ele dot como 1.2 ou 3.455 desse jeito
Vivekh
8

Você pode usar esta função JavaScript:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

E você pode vinculá-lo à sua caixa de texto assim:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

Eu uso o acima na produção, e funciona perfeitamente, e é cross-browser. Além disso, ele não depende do jQuery, portanto, você pode vinculá-lo à sua caixa de texto com JavaScript embutido:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
karim79
fonte
Isso falha quando alguém cola texto não numérico na entrada. Alguma idéia de como poderíamos superar isso? Não consigo entender isso.
usar o seguinte
7

Eu acho que vai ajudar todo mundo

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })
Até parece
fonte
você está esquecendo a entrada do teclado. Isso inclui:if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
tomvo 6/06/2013
6

Eu escrevi o meu com base na postagem de @ user261922 acima, ligeiramente modificado para que você possa selecionar a guia all e possa lidar com vários campos "somente número" na mesma página.

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});
jamesbar2
fonte
6

Aqui está uma solução rápida que eu criei há algum tempo. você pode ler mais sobre isso no meu artigo:

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});
Dima
fonte
6

Você deseja permitir a guia:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});
ngwanevic
fonte
6

Aqui está uma resposta que usa o jQuery UI Widget factory. Você pode personalizar quais caracteres são permitidos facilmente.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

Isso permitiria números, sinais numéricos e valores em dólares.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});
Mathew Foscarini
fonte
isso garante $ e depois + - como primeiro ou primeiro / segundo caracteres e depois apenas 1 ponto decimal?
gordon
6

Isso parece inquebrável.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});
Jonathan
fonte
5

É necessário verificar se o teclado numérico e a tecla tab estão funcionando também

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }
Coppermill
fonte
5

Eu queria ajudar um pouco, e fiz minha versão, a onlyNumbersfunção ...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

Basta adicionar a tag de entrada "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." e pronto;)

falha
fonte
5

Eu também gostaria de responder :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

É isso aí ... apenas números. :) Quase pode funcionar apenas com o 'blur', mas ...

Pedro Soares
fonte
5

A maneira simples de verificar se o valor inserido é numérico é:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }
Pragnesh Rupapara
fonte
5

Só é necessário aplicar esse método no Jquery e você pode validar sua caixa de texto para aceitar apenas o número.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

Experimente esta solução aqui

Jitender Kumar
fonte
5

Você pode tentar a entrada do número HTML5:

<input type="number" placeholder="enter the number" min="0" max="9">

Esse elemento de tag de entrada agora assumirá valor apenas entre 0 e 9, já que o atributo min está definido como 0 e o atributo max está definido como 9.

para obter mais informações, visite http://www.w3schools.com/html/html_form_input_types.asp

kkk
fonte