Limite o número de caracteres permitidos no campo de texto de entrada do formulário


115

Como posso limitar ou restringir o usuário a inserir no máximo cinco caracteres na caixa de texto?

Abaixo está o campo de entrada como parte do meu formulário:

<input type="text" id="sessionNo" name="sessionNum" />

Ele está usando algo como maxSize ou algo parecido?


16
<input type="text" maxlength="5"> Demonstração ao vivo aqui : jsfiddle.net/mcBbW/1
Šime Vidas

Respostas:


174

maxlength :

O número máximo de caracteres que serão aceitos como entrada. Isso pode ser maior do que o especificado por SIZE, caso em que o campo rolará de forma adequada. O padrão é ilimitado.

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

No entanto, isso pode ou não ser afetado por seu manipulador. Pode ser necessário usar ou adicionar outra função de manipulador para testar o comprimento também.


Achei essa resposta útil ao limitar na fase de entrada. Você também pode limitá-lo na fase de validação ao enviar e exibir uma mensagem de validação usando o patternatributo. Consulte stackoverflow.com/questions/10281962/…

31

A maneira mais simples de fazer isso:

maxlength="5"

Então .. Adicionando este atributo ao seu controle:

<input type="text" 
    id="sessionNo" 
    name="sessionNum" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />

8

Adicione o seguinte ao cabeçalho:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
}
</script>

    <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" 
onKeyUp="limitText(this,5);"" />

this.form.sessionNoparece um pouco suspeito. Por que não apenas this? Além disso, limitCounte limitNumtambém parece fora de ordem / desnecessário?
Jared Farrish

1
Corrigido. Fazendo desta forma se você quiser limitar a certos caracteres ou números, você pode, mas se você não se importa com isso, então o Comprimento máximo funcionará bem. Então, diga se você quiser que os valores estejam entre 1 e 50, você pode ou todos os números positivos, etc.
b3verelabs

this.form.sessionNoainda não parece certo. thisnesse contexto irá apontar para o input, não document.
Jared Farrish

Ainda não está certo, também não faz referência a form. thisé tudo o que você precisa. Além disso, tecnicamente, se você estava querendo fazer referência ao elemento pela form, seria por ( form/ input) name, não id, ou seja: document.formName.sessionNum.
Jared Farrish

Correto, digitei para jejuar, estava embrulhado no formulário antes. Mas você apenas passaria o ref para a entrada na função para obter o valor atual do campo e, em seguida, adicionaria qualquer lógica que desejasse limitar esse campo.
b3verelabs

8

De acordo com w3c , o valor padrão para o atributo MAXLENGTH é um número ilimitado. Portanto, se você não especificar o máximo, um usuário poderá recortar e colar a Bíblia algumas vezes e colá-la em seu formulário.

Mesmo se você especificar MAXLENGTH para um número razoável, certifique-se de verificar o comprimento dos dados enviados no servidor antes de processar (usando algo como php ou asp), pois é muito fácil contornar a restrição básica de MAXLENGTH de qualquer maneira


1
@lopezdp, existem várias maneiras de "contornar" as restrições de html / javascript. O mais fácil de verificar é abrir sua página com o Chrome, "inspecionar elemento" e modificar manualmente o HTML. A maneira mais elaborada de contornar o problema - escreva um script que postará os dados ignorando quaisquer restrições (usando a biblioteca curl ou algo semelhante). Como um desenvolvedor de back-end, você nunca deve confiar na validação de dados de front-end - todas as regras devem ser duplicadas no servidor. A validação de front-end é apenas uma maneira de economizar tempo para o usuário, apontando para erros óbvios sem fazer uma solicitação ao servidor.
Val Petruchek

4
<input type="text" maxlength="5">

a quantidade máxima de letras que podem estar na entrada é 5.


4

Simplifique

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

e use um alerta para mostrar que max chars foram usados.


3

Eu sempre faço assim:

$(document).ready(function(){
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
    maxChars.bind('keyup', function(e){
        length = new Number(maxChars.val().length);
        counter = max_length-length;
        $("#sessionNum_counter").text(counter);
    });
}
});

Entrada:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>

2

Comprimento máximo

O número máximo de caracteres que serão aceitos como entrada. O atributo maxlength especifica o número máximo de caracteres permitidos no elemento.

Escolas Maxlength W3

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">
</form>

1

Você pode usar <input type = "text" maxlength="9"> ou

<input type = "number" maxlength="9">para números ou <input type = "email" maxlength="9">para validação de e-mail aparecerá


1
<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}

0

Use maxlenght = "número de caracteres"

<input type="text" id="sessionNo" name="sessionNum" maxlenght="7" />

0

O código a seguir inclui um contado ...

var count = 1;

do {
    function count_down(obj, count){

    let element = document.getElementById('count'+ count);

    element.innerHTML = 80 - obj.value.length;

    if(80 - obj.value.length < 5){
        element.style.color = "firebrick";
    }else{
        element.style.color = "#333";
    }
}
count++;
} while (count < 20); 
.text-input {
    padding: 8px 16px;
    width: 50%;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    font-family: Raleway;
    border: 1px solid dodgerblue;
  }
<p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80"  class="text-input" name="bikeTitle" ></p>
        <span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>


-1
<input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);"  placeholder="MobileNumber">

<script>
function checkNumber(key) {
  console.log(key);
  var inputNumber = document.querySelector("#MobileNumber").value;
  if(key.key >= 0 && key.key <= 9) {
    inputNumber += key.key;
  }
  else {
    key.preventDefault();
  }
}
</script>
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.