Могу ли я указать максимальную длину в css?

85

Могу ли я заменить атрибут maxlength чем-нибудь в CSS?

<input type='text' id="phone_extension" maxlength="4" />
html css Брайан Рамзи
источник

Ответы:

69

Нет. Это нужно сделать в HTML. Вы можете установить значение с помощью Javascript, если вам нужно.

Эдеверетт
источник
126

Нет.

maxlength - для поведения.

CSS предназначен для стилизации.

Поэтому.


источник
Кроме того, CSS можно применять глобально к любому тегу, поэтому не имеет смысла применять свойство maxlength к div или img и т. Д.
Дэн Дипло
5
Но что, если вы хотите применить свойство maxlength к общему набору типов ввода (например, имя, город, штат), и у вас может быть несколько экземпляров этих входных данных в разных местах на веб-сайте. Было бы здорово иметь возможность определить класс (например, «FirstName»), и они применили бы этот класс ко всем входным параметрам «Имя» <Input class = "FirstName">
Catchops
@Catchops Это ограничение HTML, и использование CSS для решения этой проблемы было бы уродливым взломом. Вот почему большинство веб-фреймворков предоставляют систему шаблонов с настраиваемыми компонентами.
Габриэль
6

Я не думаю, что вы можете, и CSS должен описывать, как выглядит страница, а не то, что она делает, поэтому даже если бы вы могли, это не совсем то, как вы должны его использовать.

Возможно, вам стоит подумать об использовании JQuery для применения общих функций к компонентам формы?

Чарли
источник
3

Не с помощью CSS, но вы можете эмулировать и расширять / настраивать желаемое поведение с помощью JavaScript.

code_burgar
источник
2

Как ответили другие, в настоящее время нет способа добавить maxlength непосредственно в класс CSS.

Однако это творческое решение может достичь того, что вы ищете.

У меня есть jQuery в файле с именем maxLengths.js, на который я ссылаюсь на сайте (site.master для ASP)

запустите сниппет, чтобы увидеть его в действии, работает хорошо.

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" />
Развернуть фрагмент

Преимущество использования этого: если решено, что максимальная длина для этого типа поля должна быть увеличена или введена во всем приложении, вы можете изменить ее в одном месте. Пригодится для длин полей для таких вещей, как коды клиентов, поля полного имени, поля электронной почты, любые поля, общие для вашего приложения.

Тейлор Браун
источник
1
Этот код очень легко скопировать и вставить для нескольких типов полей. Я храню отдельный файл jQuery под названием «maxLengths.js» и включаю его в свой мастер сайта. Попробуйте, очень удобно!
Тейлор Браун
Просто потому, что вы используете класс HTML, это не CSS.
nyuszika7h 01
@ nyuszika7h спасибо за ваш столь ценный вклад в мой ответ. Я бы поспорил, хотя я не применяю никакого стиля к элементу, я все еще использую каскадную таблицу стилей в своем решении, поэтому используется CSS. Кроме того, я обновил свой ответ, чтобы отразить ваше наблюдение.
Тейлор Браун
1

Используйте, $("input").attr("maxlength", 4) если вы используете jQuery версии <1.6 и $("input").prop("maxLength", 4) если вы используете jQuery версии 1.6+.

Рохит
источник