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

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

Javascript

Tente você mesmo no JSFiddle .

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

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

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

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

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

TypeScript

Aqui está uma versão TypeScript disso.

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

jQuery

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

HTML 5

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

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

Experimente você mesmo em w3schools.com .

Use este DOM

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

E esse script

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

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

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

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

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

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

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

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

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

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

Anexar também ao evento de pressionamento de tecla

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

E HTML:

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

Aqui está um exemplo do jsFiddle

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

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

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

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

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

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

<input type="number" />

e

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

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

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

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

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

Javascript

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

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

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

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

HTML

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

Tão simples....

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

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

Na sua entrada de formulário:

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

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

2 soluções:

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

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

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

</script>

<input type="text" ... onblur="testField(this);"/>

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

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

O script abaixo permite números positivos e negativos

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

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

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

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

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

Você pode usar o padrão para isso:

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

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

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

Caracteres permitidos

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

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

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

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

Deixe-me saber se não funcionar.

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

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

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

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

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

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

input type="number" é um atributo HTML5.

No outro caso, isso ajudará você:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Código JavaScript:

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

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

Código HTML:

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

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

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

Seu código html:

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

E a função js usando jQuery

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

    });
});

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

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

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


		

Apenas uma outra variante do jQuery usando

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

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

<input type="number" maxlength="3" ng-bind="first">

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

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

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

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

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

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

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

Espero que isto ajude.

Use este DOM:

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

E este script:

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

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

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

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

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

Código ASCII para TAB => 9

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

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




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




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

Códigos ASCII:

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

Esta é uma função aprimorada:

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

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

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

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

Você pode testá-lo aqui.

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

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

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

            }       
    });     
});

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

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