如何使用 CSS3 限制输入文本长度？ [复制]答案

【问题标题】：How to limit input text length using CSS3? [duplicate]如何使用 CSS3 限制输入文本长度？ [复制]
【发布时间】：2012-11-20 23:58:32
【问题描述】：

可能重复：
Can I specify maxlength in css?

在我的 CSS 中，我使用此代码为我网站中的所有输入标签制作圆形边框。我想知道是否可以以相同的方式限制输入的长度（例如 50 个字符）

input  
{ 
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}

我想像（这不起作用）：

input
{
max-lenght: 50;
}

有什么建议吗？非常感谢！

编辑：这个问题是关于用户可以在字段中写入多少个字符，而不是输入的可见大小

【问题讨论】：

通过 HTML ? w3schools.com/tags/att_input_maxlength.asp
嗯，我想这正是因为maxlength 限制是语义，而不是表示性限制，它被指定为 HTML 属性，而不是 CSS 规则。
在css中你使用:而不是=
@raina77ow 我不认为是重复的。在写这篇文章之前，我已经阅读了这个问题。它不是同一个 CSS 和 CSS3。这个问题是在大约 4 年前提出的。可能存在使用 CSS3 的新方法。
然而这个问题（尤其是this answer）显示了为什么不适合在 CSS 中指定这个（作为任何其他与验证相关的输入属性）。这与样式化您的文档无关。如果你想要统一，你可以使用一个 JS 初始化函数，它将 maxlength 属性添加到你的所有输入中。

标签： html css input

【解决方案1】：

您不能使用 CSS 来限制输入字符的数量。那将是一个功能限制，而 CSS 处理表示。

【讨论】：

【解决方案2】：

我会处理 html 输入字段中的字符限制。例如

<input type="text" id="textbox" name="textbox" maxlength="50" />

【讨论】：

是的，但我有很多，我想知道一种“自动”的方式:)
你可以编写 JavaScript 来限制输入框中输入的字符数。您需要绑定输入字段的 'keydown' 事件，对字符进行计数，如果超过 50 个，则防止将字符写入输入字段
试试这个...jsfiddle.net/mKcgn
@jfmbrennan 这个小提琴是一个糟糕的解决方案，恕我直言。如果输入长度为 50 个字符，我应该如何修复输入？它只是拒绝之后的所有按键。
这更像是一个要点而不是一个解决方案，您需要处理退格键和可能的其他键。它很粗糙，我认为你在船上。与我推荐的相反，它更像是“这是一种可能的选择”。使用 html maxlength 属性是正确的答案

【解决方案3】：

更新：

您只能使用 Jquery。

$(document).ready(function () {
    $("input").attr('maxlength', '5');    
});

如果你真的想要一个自动的方法，你可以使用 css 和 javascript 的组合。

Javascript/JQuery

$(document).ready(function () {
    // Get all the elements with class inputMaxLength and add maxlength attribute to them
    $(".inputMaxLength").attr('maxlength', '5');    
});

CSS

.inputMaxLength
{

}

HTML

<input type="text" id="textbox" class="inputMaxLength" name="textbox" />

有点破解，但有效。据我所知，没有唯一的 CSS 解决方案。

【讨论】：