Czy mogę określić maxlength w css?

85

Czy mogę zamienić atrybut maxlength na coś w CSS?

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

html css

— Brian Ramsay
źródło

69

Nie. Należy to zrobić w HTML. Jeśli jednak potrzebujesz, możesz ustawić wartość za pomocą Javascript.

— edeverett
źródło

126

Nie.

maxlength dotyczy zachowania.

CSS służy do stylizacji.

Dlatego.

Ponadto CSS można zastosować globalnie do dowolnego tagu, więc nie miałoby sensu stosowanie właściwości maxlength do elementu div lub img itp.

— Dan Diplo

5

Ale co by było, gdybyś chciał zastosować właściwość maxlength do wspólnego zestawu typów danych wejściowych (np. Imię, miasto, stan) i możesz mieć wiele wystąpień tych danych wejściowych w różnych miejscach w witrynie internetowej. Byłoby wspaniale móc zdefiniować klasę (np. „FirstName”) i zastosować tę klasę do wszystkich danych wejściowych imienia <Input class = "FirstName">

— Catchops

@Catchops To jest ograniczenie HTML, a użycie CSS do obejścia tego byłoby brzydkim hackem. Dlatego większość frameworków internetowych zapewnia system szablonów z niestandardowymi komponentami.

— Gabriel

12

Możesz używać jQuery tak jak:

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

Oto demo: http://jsfiddle.net/TmsXG/13/

— macio.Jun
źródło

6

Myślę, że nie możesz, a CSS ma opisywać, jak wygląda strona, a nie to, co robi, więc nawet gdybyś mógł, tak naprawdę nie jest tak, jak powinieneś go używać.

Może powinieneś pomyśleć o użyciu JQuery w celu zastosowania wspólnych funkcji do komponentów formularzy?

— Charlie
źródło

4

Nie z CSS, nie.

— JMP
źródło

3

Nie z CSS, ale możesz emulować i rozszerzać / dostosowywać pożądane zachowanie za pomocą JavaScript.

— code_burgar
źródło

2

Jak odpowiedzieli inni, obecnie nie ma sposobu, aby dodać maxlength bezpośrednio do klasy CSS.

Jednak to kreatywne rozwiązanie może osiągnąć to, czego szukasz.

Mam jQuery w pliku o nazwie maxLengths.js, do którego odwołuję się w witrynie (site.master dla ASP)

uruchom fragment kodu, aby zobaczyć go w akcji, działa dobrze.

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" />

Rozwiń fragment

Zaleta tego zastosowania: jeśli zdecydujesz, że maksymalna długość tego typu pola musi zostać wypchnięta lub w całej aplikacji, możesz ją zmienić w jednym miejscu. Przydaje się do określania długości pól, takich jak kody klientów, pola z imieniem i nazwiskiem, pola e-mail, dowolne pola wspólne w Twojej aplikacji.

— Taylor Brown
źródło

1

Ten kod jest bardzo łatwy do skopiowania i wklejenia dla wielu typów pól. Trzymam osobny plik jQuery o nazwie „maxLengths.js” i dołączam go do mojego wzorca witryny. Wypróbuj, to bardzo wygodne!

— Taylor Brown

Tylko dlatego, że używasz klasy HTML, nie jest to CSS.

— nyuszika7h

@ nyuszika7h dziękuję za bardzo cenny wkład w moją odpowiedź. spierałbym się, chociaż nie stosuję żadnego stylu do elementu, nadal używam kaskadowego arkusza stylów w moim rozwiązaniu, dlatego używany jest CSS. dodatkowo zaktualizowałem moją odpowiedź, aby odzwierciedlić Twoje spostrzeżenia.

— Taylor Brown

1

Użyj, $("input").attr("maxlength", 4) jeśli używasz wersji jQuery <1.6 i $("input").prop("maxLength", 4) jeśli używasz wersji jQuery 1.6+.

— Rohit
źródło