Могу ли я указать максимальную длину в 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 для решения этой проблемы было бы уродливым взломом. Вот почему большинство веб-фреймворков предоставляют систему шаблонов с настраиваемыми компонентами.

— Габриэль

12

Вы можете использовать jQuery, например:

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

Вот демонстрация: http://jsfiddle.net/TmsXG/13/

— macio.Июнь
источник

6

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

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

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

4

Не с помощью CSS, нет.

— JMP
источник

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

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