-1

Fiz este input com html + css e está tudo ok, só não cosigo limitar o número de caracteres para 10, tentei o maxlength="10" mas não responde. Alguém pode me ajudar?

<div class="searchBox">
    <input class="searchInput" type="number"  name="localizar" id="localizar" placeholder="numero do cliente">
    <button class="searchButton" href="#">
        <i class="material-icons">
            search
        </i>
    </button>
 </div>

2
  • tentou usar o atributo max no seu input? maxlength e geralmente usado para o type="text". Se for um numero de celular, por exemplo, mude o type para text - w3schools.com/tags/att_input_type_number.asp 14/06/2020 às 2:03
  • Muito obrigado! Matou de primeira! troquei o type por text ai o campo aceitou o maxlength. 14/06/2020 às 2:16

1 Resposta 1

2

A propriedade maxlength não funciona se o tipo do input for "number". Para esse problema, uma solução simples é mudar o tipo para text.

<input class="searchInput" type="text" name="localizar" id="localizar" placeholder="numero do cliente" maxlength="10"/>

Mas se você precisa que o tipo seja número para melhor uso nos celulares, você pode utilizar o tipo "tel" que irá exibir um teclado numérico e o maxlength funcionará do mesmo jeito.

<input class="searchInput" type="tel" name="localizar" id="localizar" placeholder="numero do cliente" maxlength="10"/>

Se por algum motivo você precisar utilizar o tipo "number", a solução será com JavaScript, onde você deverá definir o evento oninput no HTML para executar uma função quando o usuário inserir algo na caixa de texto. Veja o código abaixo:

function maxLen(input) {
  if (input.value.length > 10) {
    input.value = input.value.slice(0, 10);
  }
}
<input class="searchInput" type="number" name="localizar" id="localizar" placeholder="numero do cliente" oninput="maxLen(this)">

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .