Como posso limitar possíveis entradas em um elemento "número" do HTML5?


359

Para o <input type="number">elemento, maxlengthnão está funcionando. Como posso restringir o maxlengthelemento desse número?


5
Para pessoas que procuram uma solução melhor, este é o melhor: stackoverflow.com/questions/9361193/...
Ünsal Korkmaz

4
O atributo max não funciona no navegador Chrome no tablet Android.
Foreever

4
@ ÜnsalKorkmaz: essa solução tem a desvantagem de não abrir o teclado numérico em dispositivos Android
Will

Respostas:


340

E você pode adicionar um maxatributo que especifique o número mais alto possível que você pode inserir

<input type="number" max="999" />

se você adicionar maxum minvalor e um, poderá especificar o intervalo de valores permitidos:

<input type="number" min="1" max="999" />

O item acima ainda não impedirá o usuário de inserir manualmente um valor fora do intervalo especificado. Em vez disso, ele receberá um pop-up solicitando que ele insira um valor nesse intervalo ao enviar o formulário, conforme mostrado nesta captura de tela:

insira a descrição da imagem aqui


4
Krister, isso funcionou. Também como @ Andy disse que eu usei o oninput para cortar os números adicionais. Referência mathiasbynens.be/notes/oninput
Prasad

7
@Prasad - Se a resposta de Andy estiver correta, selecione-a, em vez da mais votada.
Moshe

81
Isso está correto, mas deve-se observar que Andy afirma que isso não impede que alguém digite um número maior. Portanto, não é realmente o equivalente ao comprimento máximo em um campo de texto.
DA.

9
Se você simplesmente inseriu um flutuador de maior precisão, isso será interrompido. Por exemplo, 3.1415926 contorna isso porque é menor que 999 e maior que 1.
0112 08/10

44
Não sei por que isso é tão votado e aceito quando simplesmente não funciona! Ela afeta apenas os controles "rotadores", e não faz nada para parar o usuário digitar um número longo no.
Codemonkey

115

Você pode especificar os atributos mine max, que permitirão entrada apenas dentro de um intervalo específico.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

Porém, isso funciona apenas para os botões de controle giratório. Embora o usuário possa digitar um número maior que o permitido max, o formulário não será enviado.

Mensagem de validação do Chrome para números maiores que o máximo
Captura de tela retirada do Chrome 15

Você pode usar o oninputevento HTML5 no JavaScript para limitar o número de caracteres:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

11
Um possível problema com essa abordagem do JavaScript: pode não funcionar como esperado se o ponto de inserção não estiver no final do valor. Por exemplo, se você inserir o valor "1234" no campo de entrada, mova o ponto de inserção de volta para o início do valor e digite "5", e o valor "5123" será finalizado. Isso é diferente de um campo de entrada type = "text" com um comprimento máximo de 4, em que o navegador não permite digitar um quinto caractere no campo "full" e o valor permanecerá "1234".
Jon Schneider

@Andy, Obviamente, a questão está à procura de uma forma não-JS fazer maxlength.............
Pacerier

4
@ Pacerier: algo na minha resposta implica que eu pensava o contrário? Como você pode ver, eu ofereci a solução mais próxima possível que pode ser obtida usando apenas HTML, juntamente com uma sugestão adicional que usa JavaScript, onde o OP pode querer impedir o usuário de digitar mais caracteres do que o permitido.
Andy E

84

Se você está procurando uma solução para Web móvel na qual deseja que o usuário veja um teclado numérico em vez de um teclado de texto completo. Use type = "tel". Ele funcionará com o maxlength, o que evita a criação de javascript extra.

Max e Min ainda permitirão que o usuário digite números acima de max e min, o que não é o ideal.


3
Ótima descoberta, isso funcionou como um encanto, perfeito para não ter que criar o javascript extra.
1111 Diego

9
Descobri que essa não é a melhor solução para entrada numérica porque uma entrada "tel" permite símbolos adicionais e exibe letras ao lado de cada número. O teclado puramente numérico parece muito mais limpo.
27414 hawkharris

@hawkharris Você está correto, digite = "number" é a interface do usuário mais limpa. É mais fácil digitar acidentalmente um caractere incorreto. Portanto, é necessária uma validação adicional para garantir que o usuário não insira dados incorretos. Mas considere também que o usuário poderia facilmente inserir todos os pontos decimais com um teclado numérico. Também não resolve a questão acima sem JavaScript adicional.
Duane

11
Obrigado, eu estou trabalhando em aplicativo móvel quadro iônica e isso resolveu o meu problema
Ahmed

11
se usado com pattern = "[0-9] *", os símbolos extras serão desativados
apereira 18/09/18

71

Você pode combinar tudo isso assim:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>


Atualização:
você também pode impedir a inserção de caracteres não numéricos, porque object.lengthseria uma sequência vazia para as entradas numéricas e, portanto, seu comprimento seria 0. Portanto, a maxLengthCheckfunção não funcionará.

Solução:
Veja isto ou isto para obter exemplos.

Demo - Veja a versão completa do código aqui:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Atualização 2: Aqui está o código de atualização: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Atualização 3: Observe que permitir que mais de um ponto decimal seja inserido pode atrapalhar o valor do numeral.


Essa é uma boa solução, mas acho que object.value.length retorna 0 se houver algum valor não numérico inserido.
Andrew

11
@AndrewSpear Isso ocorre porque object.value seria uma string vazia se você inserir valores não numéricos nas entradas com um tipo de 'número' definido. Veja a documentação. Além disso, leia minha atualização para corrigir esse problema.
David Refoua

Isso ainda será interrompido se você inserir mais de um ponto decimal, como 111..1111. Não use esse código por segurança, pois o código malicioso ainda pode ser transmitido.
PieBie

@PieBie Cara, esse código é para mais de 3 anos atrás. Use o jQuery.
David Refoua

11
Sim, eu sei disso, mas os iniciantes ainda podem copiar e colar.
PieBie

26

é muito simples, com algum javascript você pode simular um maxlength, confira:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

12
Com sua solução, você não pode usar backspace depois de atingir 2 caracteres. mas eu sinto falta algumas coisa para uma solução funcional
Christophe Debove

12
Em vez de onKeyDown, você deve usar onKeyPress.
Rupesh Arora 25/05

11
não funcionará se você destacar o texto e pressionar um caractere (ou seja, para substituir o conteúdo da entrada) #
315 Arijoon

validar esta se isso não é da seguinte chaves stackoverflow.com/a/2353562/1534925
Akshay

3
O problema keydowné que você não pode usar backspace com no máximo caracteres. O problema keypressé que você pode copiar e colar além dos caracteres máximos.
Stavm

23

Ou se o seu valor máximo for, por exemplo, 99 e o mínimo 0, você poderá adicioná-lo ao elemento de entrada (seu valor será reescrito pelo seu valor máximo, etc.)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

Então (se você quiser), você pode verificar se a entrada é realmente o número


... Ótimo, mas você não precisa mais de min e max, cara. (apenas dizendo)
xoxel 30/09/16

2
@xoxel você faria se você quer a mensagem de aviso ainda exibição
DNKROZ

Isso é realmente bom ... Obrigado
Vincy Oommen 13/01

por uma questão de generalização que eu fariaonKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
oriadam

18

Você pode especificá-lo como texto, mas adicione pettern, que corresponde apenas a números:

<input type="text" pattern="\d*" maxlength="2">

Funciona perfeitamente e também no celular (testado no iOS 8 e Android) exibe o teclado numérico.


O atributo padrão não é suportado no IE9 e versões anteriores, e tem suporte parcial no Safari: caniuse.com/#feat=input-pattern
diazdeteran

Sim, obrigado por apontar, mas descartamos o suporte ao IE9 (cortando a mostarda) e eu prefiro os métodos JS. Depende do projeto.
Chris Panayotoff

2
Um usuário não é impedido de inserir caracteres não numéricos com isso. Eles podem inserir 2 de qualquer caractere. As patternúnicas causas destacam a validação.
Br

testado no Android 9 (Nokia 8), mas eu recebo o teclado normal :( alguma idéia?
oriadam

14

//For Angular I have attached following snippet.
<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

Se você usar o evento "onkeypress", não receberá nenhuma limitação do usuário enquanto estiver desenvolvendo (teste de unidade). E se você possui requisitos que não permitem que o usuário entre após um determinado limite, consulte este código e tente uma vez.


11
Os problemas que vejo aqui são: 1. substitua por selecione o texto e o tipo não funcionará se a entrada tiver atingido 7 números. botão. Quebra a limitação
Edub

Eu tentei com a versão simples javascript. Se você quiser, pode ver o uso do snippet de código Run. Como tal, não encontrei nenhuma limitação.
Prasad Shinde

11
Também não encontrou nenhuma limitação. Para em 7 dígitos. Estou usando esta solução para o meu código.
Cláudio

Existe uma limitação. Quando você atingir o limite, selecione todos e deseja substituí-los, não funciona. A substituição funciona para mim apenas quando substituo o valor pelo valor atual antes de retornar falso.
Insomnia88

@ Insomnia88, @ edub que se escrevermos função e verificar as condições necessárias ...
Prasad Shinde

12

Outra opção é adicionar apenas um ouvinte a qualquer coisa com o atributo maxlength e adicionar o valor da fatia a ele. Supondo que o usuário não queira usar uma função em todos os eventos relacionados à entrada. Aqui está um trecho de código. Ignore o código CSS e HTML, o JavaScript é o que importa.

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>


10

O comprimento máximo não funcionará <input type="number"da melhor maneira que eu sei é usar oninputevent para limitar o comprimento máximo . Por favor, veja o código abaixo para uma implementação simples.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

Trabalhou como um encanto!
SiboVG 18/03

9

Digamos que você desejasse que o valor máximo permitido fosse 1000 - digitado ou com o botão giratório.

Você restringe os valores do girador usando: type="number" min="0" max="1000"

e restrinja o que é digitado pelo teclado com javascript: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

8

Conforme declarado por outros, min / max não é o mesmo que maxlength porque as pessoas ainda podem entrar em um flutuador que seria maior que o comprimento máximo da string que você pretendia. Para realmente emular o atributo maxlength, você pode fazer algo assim em uma pitada (isso é equivalente a maxlength = "16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

A fatia excluirá caracteres sem o conhecimento do usuário final quando inseridos no meio. enquanto o comprimento máximo será bloqueado.
Pradeep Kumar Prabaharan

@PradeepKumarPrabaharan maxlengthnão é suportado por entradas numéricas. No meu exemplo, value.slice(0,16)não será ativado, a menos que o valor de entrada tenha mais de 16 caracteres.
thdoan

sim maxlength não é suportada para as entradas número .. este código é gud mas esse código não corresponde à propriedade do maxlength exatamente ..
Pradeep Kumar Prabaharan

@TobiasGaertner type="number"cuida disso :).
thdoan

@ 10basetom ... dependendo do navegador ... por exemplo, no FF você ainda pode inserir caracteres e eles não param após o limite - mas, relacionado à idéia do número do tipo, essa é uma solução aceitável.
Tobias Gaertner 25/10

6

A resposta de Maycow Moura foi um bom começo. No entanto, sua solução significa que, quando você digita o segundo dígito, toda a edição do campo é interrompida. Portanto, você não pode alterar valores ou excluir nenhum caractere.

O código a seguir para em 2, mas permite que a edição continue;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

2
Não. Tente colar um valor.
Qwertiy

6

Eu já tinha esse problema e resolvi-o usando uma combinação de tipo de número html5 e jQuery.

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

roteiro:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

Não sei se os eventos são um pouco exagerados, mas isso resolveu meu problema. JSfiddle


Você pode colar caracteres facilmente.
Jessica

4

Entrada HTML

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

4

uma maneira simples de definir o comprimento máximo para entradas numéricas é:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

não funciona no android chrome. O onkeypress tem alguns problemas com isso.
Aakash Thakur

3

Assim como type="number"você especifica uma propriedade em maxvez de maxlength, que é o número máximo possível possível. Assim, com 4 dígitos, maxdeve ser 9999, 5 dígitos 99999e assim por diante.

Além disso, se você quiser ter certeza de que é um número positivo, pode definir min="0", garantindo números positivos.


3

Ugh. É como se alguém desistisse no meio da implementação e pensasse que ninguém notaria.

Por alguma razão, as respostas acima não usar o mine maxatributos. Este jQuery termina:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

Provavelmente também funcionaria como uma função nomeada "oninput" sem jQuery se você é um desses tipos "jQuery é o diabo".


não responder corretamente a pergunta, mas votou-se como tem resolvido o meu problema :)
TrOnNe

2

Como eu descobri que você não pode usar qualquer um onkeydown, onkeypressou onkeyupeventos para uma solução completa, incluindo navegadores móveis. A propósito, ele onkeypressestá obsoleto e não está mais presente no chrome / opera para android (consulte: UI Events W3C Working Draft, 04 de agosto de 2016 ).

Eu descobri uma solução usando oninputapenas o evento. Pode ser necessário fazer uma verificação adicional do número, conforme necessário, como sinal negativo / positivo ou separadores decimais e mil, e assim por diante, mas, para começar, o seguinte deve ser suficiente:

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

Eu recomendaria também para combinar maxlengthcom mine maxpara evitar que submete erradas como dito acima várias vezes.


2
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

ou se você quiser poder inserir nada

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

1

Você pode tentar isso também para entrada numérica com restrição de comprimento

<input type="tel" maxlength="3" />

@tiltdown Sry para erros de digitação. Corrigida a resposta.
shinobi

1

Sei que já existe uma resposta, mas se você deseja que sua entrada se comporte exatamente como o maxlengthatributo ou o mais próximo possível, use o seguinte código:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

@Phill_t talvez você possa me esclarecer? Eu usei seu código e ele está funcionando bem no principal, mas "$ (this) .attr (" maxlength ")" sempre entrega 2. E por que seria melhor usar "$ (this) .attr (" maxlength ")" se estava funcionando em vez de apenas "this.maxlength" que eu testei e estava funcionando conforme o esperado e é mais curto e imho também mais claro de ler? Eu perdi alguma coisa?
Markus s

O que você quer dizer com "entrega 2"?
precisa saber é o seguinte

Phill_t minhas desculpas. "this.maxLength" está funcionando apenas no escopo da função keydown. Na função "addMax" "this" está o documento em vez do elemento esperado e, portanto, possui valores de atributo diferentes. Como eu teria acesso à entrada de número? O código acima está realmente funcionando do seu lado? Testei com Chrome / Opera / Vivaldi, Firefox, Edge, IE e Safari e obtive os mesmos resultados para cada navegador. Ok, no Edge maxlegth = "1" e maxlength = "2" onde realmente funciona, mas "$ (this) .attr (" maxlength ")" não aumenta mais para um número maior !!? @anybody: Alguma sugestão?
Markus s

Como eu disse, sempre são dois porque é chamado no documento, e não no elemento em questão, como descobri quando estava depurando. Pela maneira que você também pode querer olhar para a minha solução que eu descobri depois de estudar sua: stackoverflow.com/a/41871960/1312012
markus s

0

Atributos mais relevantes a serem usados ​​seriam mine max.


0

Isso pode ajudar alguém.

Com um pouco de javascript, você pode procurar todas as entradas locais de data e hora, pesquisar se o ano que o usuário está tentando inserir, maior que 100 anos no futuro:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.