HTML de entrada de texto permitem entrada somente numérica

StackOverflow https://stackoverflow.com/questions/469357

  •  19-08-2019
  •  | 
  •  

Pergunta

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

Foi útil?

Solução

Nota: Esta é uma resposta atualizado. Comentários abaixo referem-se a uma versão antiga que brinquei com keycodes.

JavaScript

A função setInputFilter abaixo permite que você use qualquer tipo de filtro de entrada em um <input> texto, incluindo vários filtros numéricos (veja abaixo).

Ao contrário da maioria de outras soluções, esta corretamente suporta Copiar + colar, arrastar + Gota, todos os atalhos de teclado, todas as operações de menu de contexto, todas as teclas não tipáveis ??(por exemplo, teclas de cursor e de navegação), o acento circunflexo posição, todos os layouts de teclado de todas as linguagens e plataformas, e todos os navegadores desde IE 9 .

Tente você mesmo em jsFiddle . 

// Restricts input for the given textbox to the given inputFilter.
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);
      }
    });
  });
}

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

Alguns filtros de entrada que você pode querer usar:

  • (somente positivo) Integer valores:
    /^\d*$/.test(value)
  • Integer valores (positivos e até um limite particular):
    /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
  • Integer valores (tanto positivos como negativos):
    /^-?\d*$/.test(value)
  • ponto flutuante valores (permitindo tanto . e , como separador decimal):
    /^-?\d*[.,]?\d*$/.test(value)
  • Moeda valores (ou seja, no máximo, duas casas decimais):
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • A-Z (letras latinas ou seja básicos) só:
    /^[a-z]*$/i.test(value)
  • letras latinas apenas (ou seja Inglês ea maioria dos idiomas europeus, consulte https: // unicode-mesa .com para obter detalhes sobre faixas de caracteres Unicode):
    /^[a-z\u00c0-\u024f]*$/i.test(value)
  • hexadecimal valores:
    /^[0-9a-f]*$/i.test(value)

Note que você ainda deve fazer a validação do lado do servidor!

jQuery

Há também uma versão jQuery deste. Consulte esta resposta ou experimentar por si mesmo on jsFiddle .

HTML 5

HTML 5 tem uma solução nativa com <input type="number"> (veja o especificação ), mas nota que o apoio navegador varia:

  • A maioria dos navegadores só irá validar a entrada ao enviar o formulário, e não quando digitação.
  • A maioria dos navegadores móveis não suportam os atributos step, min e max.
  • Chrome (versão 71.0.3578.98) ainda permite que o usuário digite o e personagens e E no campo. Veja também esta questão .
  • Firefox (versão 64.0) e Edge (edgehtml versão 17,17134) ainda permitir que o usuário digite qualquer texto no campo.

Tente você mesmo em w3schools.com .

Outras dicas

Use este DOM 

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

E este 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 bem para uma boa resposta para isso, e precisamos desesperadamente <input type="number", mas menos do que isso, estes 2 são as formas mais concisas que eu poderia vir acima com: 

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

Se você não gosta o carácter não aceita mostrando por uma fração de segundo antes de ser apagado, o método a seguir é minha solução. Observe as numerosas condições adicionais, isso é para evitar desativando todos os tipos de navegação e teclas de atalho. Se alguém sabe como compactificadas 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 é um simples que permite exatamente uma casa 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;
    }
};

Além disso anexar ao evento de teclado 

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

E HTML: 

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

Aqui está um exemplo jsFiddle

HTML5 tem <input type=number>, que soa bem para você. Atualmente, apenas Opera suporta nativamente, mas não há um projeto que tem uma implementação JavaScript.

A maioria das respostas aqui todos têm a fraqueza de usar eventos KEY- .

Muitas das respostas que limitaria sua capacidade de fazer a seleção de texto com macros de teclado, copiar + colar e um comportamento mais indesejado, outros parecem depender de plugins jQuery específicos, que está a matar moscas com metralhadoras.

Esta solução simples parece funcionar melhor para mim plataforma, independentemente do mecanismo de entrada (keystroke, copiar + colar, rightclick cópia + colar, speech-to-text etc.). Todas as macros de teclado seleção de texto que ainda trabalho, e seria até mesmo limitar as capacidade de definir um valor não numérico pelo script. 

function forceNumeric(){
    this.value(this.value.replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input.numeric-text', forceNumeric);

I optou por usar uma combinação das duas respostas aqui mencionadas ou seja.

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

HTML5 suporta expressões regulares, de modo que você pode utilizar isto: 

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

Atenção:. Alguns navegadores não suportam esta ainda

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 que 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);"/ >

2 soluções:

Use um validador de forma (por exemplo, com jQuery validação de encaixe )

Faça uma verificação durante o onblur (ou seja, quando as folhas do usuário do campo) evento 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);"/>

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

Em sua entrada de formulário: 

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

Com a entrada máx. (Estes acima permite a um número de 12 dígitos)

Uma abordagem mais segura é verificar o valor da entrada, em vez de seqüestro de teclas pressionadas e tentando keycodes filtro.

Desta forma, o usuário é livre para usar as setas do teclado, teclas modificadoras, backspace, apagar, use keyboars não padrão, use o mouse para colar, uso de arrastar e texto gota, entradas de acessibilidade até mesmo usar.

A seguir script permite positivas e números 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>

EDIT:. Tirei minha velha resposta, porque eu acho que é antiquado agora

Veja abaixo solução mencionada. Neste usuário pode ser capaz de entrar apenas o valor numeric, também usuário não pode ser capaz de copy, paste, drag e drop na entrada.

Caracteres permitidos 

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

Não permitidos caracteres e os caracteres através de eventos

  • valor alfabética
  • Caracteres especiais
  • Copiar
  • Colar
  • Drag
  • Gota 

$(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 ele não funciona.

Você pode usar o padrão para isso: 

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

Aqui você pode ver a completas dicas de interface website móveis .

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

A implementação curto e doce usando jQuery e substituir () 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 pequeno efeito colateral que a letra digitada aparece momentaneamente e CTRL / CMD + A parece se comportar um pouco estranho.

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 acesso de retrocesso é de 8 e uma expressão regex não deixá-lo, por isso é uma maneira fácil de contornar o bug:)

Apenas uma outra variante com jQuery usando 

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

input type="number" é um atributo HTML5.

No outro caso isso irá ajudá-lo: 

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

Mais um exemplo onde 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');">

apenas uso type = "número" agora este atributo apoio na maioria dos navegadores 

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

Você também pode comparar o valor de entrada (que é tratada como corda por padrão) para se 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 para 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>

Use esse 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 de for ... 

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 vez de onkeypress, porque o atributo onkeydown é verificada antes atributo onkeypress. O problema seria no navegador Google Chrome.

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

ASCII Código para TAB => 9

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

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




NCount = 0

48 + nCount = 48

nCount + +

48 + nCount = 49

nCount + +

...

48 + 57 = nCount




No caso das teclas 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 da esquerda);
  • 39 => (seta para a direita);
  • 48 - 57 => (números);
  • 36 => (casa);
  • 35 => (final);

Esta é uma função melhorada: 

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 que todos os tipos de números - negativos reais, real positivo, negativo inteiro, inteiro positivo) é: 

$(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 de solução . Suportes min e atributos max. Se o número está fora do intervalo, será mostrado o valor anterior.

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 de uso dinâmica 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'));
            }
    }); 
});

A minha solução para uma melhor experiência do usuário:

HTML 

<input type="tel">

jQuery 

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

Detalhes:

Em primeiro lugar, tipos de entrada :

number mostra para cima / baixo setas diminuindo o espaço de entrada real, eu encontrá-los feio e só são úteis se o número representa uma quantidade (coisas como telefones, códigos de área, IDs ... não precisa deles) tel fornece validações navegador semelhantes de número sem setas

Usando [número / tel] também ajuda a mostrar o teclado numérico em dispositivos móveis.

Para a validação JS acabei precisando de 2 funções, uma para a entrada de usuário normal (pressão) e outro para uma cópia + colar correção (mudança), outras combinações iria me dar ao usuário uma experiência terrível.

Eu uso o mais confiável KeyboardEvent.key em vez do agora obsoleto KeyboardEvent.charCode

E, dependendo de apoio seu navegador, você pode considerar o uso de Array.prototype.includes () em vez do mal chamado Array.prototype.indexOf () (para verdadeiro / falso resultados)

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

Seu código html: 

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

E os js função 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"/>

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top