Posso especificar maxlength em css?

85

Posso substituir o atributo maxlength por algo em CSS?

<input type='text' id="phone_extension" maxlength="4" />

html css

— Brian Ramsay
fonte

69

Não. Isso precisa ser feito no HTML. Você pode definir o valor com Javascript se precisar.

— Edeverett
fonte

127

Não.

maxlength é para comportamento.

CSS é para estilização.

É por isso que.

Além disso, CSS pode ser aplicado globalmente a qualquer tag, então não faria sentido ter uma propriedade maxlength aplicada a um div ou img etc.

— Dan Diplo

5

Mas e se você quisesse aplicar uma propriedade maxlength a um conjunto comum de tipos de entrada (por exemplo, nome, cidade, estado) e pudesse ter várias instâncias dessas entradas em vários lugares através do site. Seria ótimo ser capaz de definir uma classe (por exemplo, 'FirstName') e eles aplicariam essa classe a todas as entradas de nome <Input class = "FirstName">

— Catchops

@Catchops Essa é uma limitação do HTML e usar CSS para contornar isso seria um hack feio. É por isso que a maioria dos frameworks web fornece um sistema de template com componentes personalizados.

— Gabriel

12

Você pode usar o jQuery como:

$("input").attr("maxlength", 4)

Aqui está uma demonstração: http://jsfiddle.net/TmsXG/13/

— macio.Jun
fonte

6

Eu não acho que você possa, e CSS deve descrever a aparência da página e não o que ela faz, então, mesmo se você pudesse, não é realmente como você deveria estar usando.

Talvez você deva pensar em usar JQuery para aplicar funcionalidades comuns aos seus componentes de formulário?

— Charlie
fonte

4

Não com CSS, não.

— JMP
fonte

3

Não com CSS, mas você pode emular e estender / personalizar o comportamento desejado com JavaScript.

— code_burgar
fonte

2

Como outros responderam, não há uma maneira atual de adicionar maxlength diretamente a uma classe CSS.

No entanto, esta solução criativa pode alcançar o que você procura.

Eu tenho o jQuery em um arquivo chamado maxLengths.js que faço referência no site (site.master para ASP)

execute o snippet para vê-lo em ação, funciona bem.

jquery, css, html:

$(function () {
    $(".maxLenAddress1").keypress(function (event) {

        if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
            return false;
        } else {
            return true;
        }

    });
});

.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" class="maxLenAddress1" />

Expandir snippet

A vantagem de usar isso: se for decidido que o comprimento máximo para esse tipo de campo precisa ser empurrado para fora ou para dentro em todo o aplicativo, você pode alterá-lo em um local. É útil para comprimentos de campo para coisas como códigos de cliente, campos de nome completo, campos de e-mail, qualquer campo comum em seu aplicativo.

— Taylor Brown
fonte

1

Este código é muito fácil de copiar e colar para vários tipos de campo. Eu mantenho um arquivo jQuery separado chamado "maxLengths.js" e incluo-o no mestre do meu site. Experimente, é muito conveniente!

— Taylor Brown,

Só porque você usa uma classe HTML, ela não é CSS.

— nyuszika7h 01 de

@ nyuszika7h obrigado por sua contribuição muito apreciada em minha resposta. Eu diria que embora não esteja aplicando nenhum estilo ao elemento, ainda estou usando uma folha de estilos em cascata na minha solução, portanto, CSS está sendo utilizado. além disso, atualizei minha resposta para refletir sua observação.

— Taylor Brown

1

Use $("input").attr("maxlength", 4) se estiver usando jQuery versão <1.6 e $("input").prop("maxLength", 4) se estiver usando jQuery versão 1.6+.

— Rohit
fonte