Limite de caracteres em HTML

95

Como você impõe um limite de caracteres em uma entrada de texto em HTML?

html character-limit Iwasakabukiman
fonte

Respostas:

133

Existem 2 soluções principais:

O HTML puro:

<input type="text" id="Textbox" name="Textbox" maxlength="10" />

O JavaScript (anexe-o a um evento onKey):

function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } 
}

Mas de qualquer maneira, não existe uma boa solução. Você não pode se adaptar à má implementação de HTML de cada cliente, é uma luta impossível de vencer. É por isso que é muito melhor verificar no lado do servidor, com um script PHP / Python / qualquer.

e-satis
fonte
27
Verifique no servidor como uma verificação final de sanidade, mas adicione aprimoramento do lado do cliente, se puder; torna a experiência do usuário mais rica.
Rob
43

há um atributo maxlength

<input type="text" name="textboxname" maxlength="100" />
cruizer
fonte
1
Isso é verdade, mas alguns clientes não verificam isso. Isso é especialmente verdadeiro para clientes que usam telefones celulares.
Drejc,
Também existem maneiras de removê-los. Por exemplo, o Firefox Web Developer Extension possui uma função Remove Maximum lengths.
Sam Hasler
Com o Chrome e seu kit de desenvolvedor (que vem com o navegador) é simples remover essas coisas do html
AntonioCS
12

Além do acima exposto, gostaria de salientar que a validação do lado do cliente (código HTML, javascript, etc.) nunca é suficiente. Verifique também o comprimento do lado do servidor ou simplesmente não verifique (se não for tão importante que as pessoas possam contorná-lo, então também não é importante o suficiente para justificar quaisquer medidas para prevenir isso).

Além disso, companheiros, ele (ou ela) disse HTML, não XHTML. ;)

Devin Jeanpierre
fonte
concordo. pode-se fazer o POST de dados diretamente em um site usando alguma ferramenta de script, portanto, nesse caso maxlength e outras validações do lado do navegador não são infalíveis
cruizer
ou use firebug e remova o atributo maxlength.
Zach,
1

Para o elemento <input>, há o atributo maxlength:

<input type="text" id="Textbox" name="Textbox" maxlength="10" />

(a propósito, o tipo é "texto", não "caixa de texto" como os outros estão escrevendo), no entanto, você deve usar javascript com <textarea> s. De qualquer forma, o comprimento deve ser verificado no servidor de qualquer maneira.

Pilsetnieks
fonte
0

você pode definir maxlength com jquery que é muito rápido

jQuery(document).ready(function($){ //fire on DOM ready
 setformfieldsize(jQuery('#comment'), 50, 'charsremain')
})
shekh danishuesn
fonte