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

Odpowiedzi:


69

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


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


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?



3

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


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

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.


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+.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.