我可以在 css 中指定 maxlength 吗？答案

【问题标题】：Can I specify maxlength in css?我可以在 css 中指定 maxlength 吗？
【发布时间】：2017-06-01 23:16:59
【问题描述】：

我可以用 CSS 中的东西替换 maxlength 属性吗？

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

【问题讨论】：

标签： html css

【解决方案1】：

没有。

maxlength 用于行为。

CSS 用于样式。

这就是为什么。

【讨论】：

此外，CSS 可以全局应用于任何标签，因此将 maxlength 属性应用于 div 或 img 等是没有意义的。
但是，如果您想将 maxlength 属性应用于一组常见的输入类型（例如名字、城市、州），并且您可以通过网站在不同的地方拥有这些输入的多个实例，该怎么办？ .能够定义一个类（例如“FirstName”）并将该类应用于所有名字输入
@Catchops 这是 HTML 的一个限制，使用 CSS 来解决这个问题将是一个丑陋的 hack。这就是为什么大多数 Web 框架都提供带有自定义组件的模板系统。

【解决方案2】：

没有。这需要在 HTML 中完成。如果需要，您可以使用 Javascript 设置值。

【讨论】：

【解决方案3】：

你可以像这样使用jQuery：

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

这是一个演示：http://jsfiddle.net/TmsXG/13/

【讨论】：

【解决方案4】：

我不认为你可以，而且 CSS 应该描述页面的外观而不是它的作用，所以即使你可以，它也不是你应该如何使用它。

也许您应该考虑使用 JQuery 将通用功能应用到您的表单组件？

【讨论】：

【解决方案5】：

不使用 CSS，不。

【讨论】：

【解决方案6】：

不使用 CSS，但您可以使用 JavaScript 模拟和扩展/自定义所需的行为。

【讨论】：

【解决方案7】：

正如其他人所回答的，目前没有直接将 maxlength 添加到 CSS 类的方法。

但是，这种创造性的解决方案可以实现您所寻找的。

我在一个名为 maxLengths.js 的文件中有 jQuery，我在站点中引用了该文件（ASP 的 site.master）

运行 sn-p 来查看它的运行情况，效果很好。

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

使用它的优点：如果决定需要在整个应用程序中推出或推出此类字段的最大长度，则可以在一个位置进行更改。对于客户代码、全名字段、电子邮件字段、应用程序中常见的任何字段等字段长度非常有用。

【讨论】：

这段代码很容易复制和粘贴多个字段类型。我保留了一个名为“maxLengths.js”的单独 jQuery 文件，并将其包含在我的站点主文件中。试试看，很方便！
仅仅因为你使用了一个 HTML 类，它不是 CSS。
@nyuszika7h 感谢您对我的回答非常感谢。我会争辩说，虽然我没有对元素应用任何样式，但我仍在我的解决方案中使用级联样式表，因此正在使用 CSS。此外，我更新了我的答案以反映您的观察。

【解决方案8】：

使用$("input").attr("maxlength", 4) 如果您使用的是 jQuery 版本 $("input").prop("maxLength", 4) 如果您使用的是 jQuery 1.6+ 版本。

【讨论】：