validation limitar - Como permitir somente numérico (0-9) em caixa de entrada HTML usando jQuery?





caracteres input (25)


função suppressNonNumericInput (event) {

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

Eu estou criando uma página web onde eu tenho um campo de texto de entrada no qual eu quero permitir apenas caracteres numéricos como (0,1,2,3,4,5 ... 9) 0-9.

Como posso fazer isso usando jQuery?




O atributo padrão em HTML5 especifica uma expressão regular na 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, telefone, 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 pode ser inserido.




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ólar.

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



$(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




Eu escrevi o meu baseado fora do post @ user261922 acima, ligeiramente modificado para que você possa selecionar todos, aba e pode lidar com vários campos "número apenas" 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;
        }
    });
});



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







Você pode tentar a entrada do number HTML5:

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

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




Eu queria ajudar um pouco e fiz a minha versão, a onlyNumbers função do onlyNumbers ...

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 =" retornar onlyNumbers (event) "..." e está pronto;)




Um mais simples para mim é

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



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 só tem valor entre 0 e 9, pois o atributo min é definido como 0 e o atributo max é definido como 9.

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




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

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });



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



jQuery

O plugin inputFilter do script abaixo 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 + Soltar, atalhos de teclado, operações de menu de contexto, teclas não tipificáveis ​​e todos os layouts de teclado. Funciona entre navegadores e em dispositivos móveis, o IE 9+ . Note que você ainda deve fazer a validação do lado do servidor!

Experimente você mesmo no JSFiddle .

// Restricts input for each element in the set of matched elements to the given inputFilter.
(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);
      }
    });
  };
}(jQuery));

Uso:

// Restrict input to digits only by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value);
});

Algumas expressões regulares que você pode querer usar para filtragem de entrada:

  • /^-?\d*$/ restringe a entrada para números inteiros
  • /^\d*$/ restringe a entrada para números inteiros não assinados
  • /^[0-9a-f]*$/i restringe a entrada a números hexadecimais
  • /^-?\d*[.,]?\d*$/ restringe a entrada para números de ponto flutuante (permitindo ambos . e , como separador decimal)
  • /^-?\d*[.,]?\d{0,2}$/ restringe a entrada a valores monetários (ou seja, no máximo duas casas decimais)

Você também pode querer restringir a entrada para valores inteiros até um limite específico:

$("#myTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 1500);
});

JavaScript puro

jQuery não é realmente necessário para isso, você pode fazer a mesma coisa com JavaScript puro também. Veja esta resposta ou tente você mesmo no JSFiddle .

HTML 5

O HTML 5 tem uma solução nativa com <input type="number"> (consulte a specification ), mas observe que o suporte ao navegador varia . Por exemplo, o Firefox (a partir da versão 63.0.3) ainda permite que o usuário insira texto no campo.

Experimente você mesmo em w3schools.com .

Opções de validação mais complexas

Se você quiser fazer alguns outros bits de validação, isso pode ser útil:




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



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 ... apenas números. :) Quase pode funcionar apenas com o "borrão", mas ...




Só precisa 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 here




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, não depende do jQuery, portanto, você pode vinculá-lo à sua caixa de texto com o JavaScript embutido:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>



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



Aqui está uma solução rápida que 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);
});



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

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

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

ou para código de evento, use 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();
    }



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



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




Precisa ter certeza de que você tem o teclado numérico e a tecla guia trabalhando 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();
                }
            }



Para descrever a "mudança de paradigma", acho que uma resposta curta pode ser suficiente.

AngularJS muda a maneira de encontrar elementos

No jQuery , você normalmente usa seletores para encontrar elementos e, em seguida, conecta-os:
$('#id .class').click(doStuff);

No AngularJS , você usa diretivas para marcar os elementos diretamente, para conectá-los:
<a ng-click="doStuff()">

Não AngularJS não precisa (ou quer)-lo a encontrar elementos usando seletores - a principal diferença entre das AngularJS jqLite contra full-blown jQuery é que jqLite não suporta seletores .

Então, quando as pessoas dizem "não inclua jQuery", é principalmente porque elas não querem que você use seletores; eles querem que você aprenda a usar diretivas. Direto, não selecione!





jquery html validation numeric