Html 如何使用 CSS3 限制输入文本长度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13484291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to limit input text length using CSS3?
提问by yenssen
Possible Duplicate:
Can I specify maxlength in css?
In my CSS I use this code to make round borders for all the input tags in my site. I wonder if it is possible to limit the lenght of the input in the same way (for example 50 characters)
在我的 CSS 中，我使用此代码为站点中的所有输入标签制作圆形边框。我想知道是否可以以相同的方式限制输入的长度（例如 50 个字符）
input
{
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}
I imagine something like (this is not working):
我想像（这是行不通的）：
input
{
max-lenght: 50;
}
Any sugestions? Thank you very much!
有什么建议吗？非常感谢！
EDIT: This question is about how many characters can the user write into the field, not the visible size of the input
编辑：这个问题是关于用户可以在字段中写入多少个字符，而不是输入的可见大小
回答by Jukka K. Korpela
You cannot use CSS to limit the number of input characters. That would be a functional restriction, and CSS deals with presentation.
您不能使用 CSS 来限制输入字符的数量。这将是一个功能限制，而 CSS 处理表示。
回答by jfmbrennan
I would handle the character limit in the html input field. e.g.
我会处理 html 输入字段中的字符限制。例如
<input type="text" id="textbox" name="textbox" maxlength="50" />
回答by Nadeeja Bomiriya
Update:
更新：
You can use only Jquery.
您只能使用 Jquery。
$(document).ready(function () {
$("input").attr('maxlength', '5');
});
If you really want an automatic method you can use combination of css and javascript.
如果你真的想要一个自动方法，你可以使用 css 和 javascript 的组合。
Javascript/JQuery
Javascript/JQuery
$(document).ready(function () {
// Get all the elements with class inputMaxLength and add maxlength attribute to them
$(".inputMaxLength").attr('maxlength', '5');
});
CSS
CSS
.inputMaxLength
{
}
HTML
HTML
<input type="text" id="textbox" class="inputMaxLength" name="textbox" />
Bit of a hack, but works. There is no css only solution as far as I am aware.
有点黑客，但有效。据我所知，没有 css 唯一的解决方案。
