输入-在HTML Tex中设置最大长度

这个问题已经在这里有了答案:

我如何使用maxlength阻止textarea中的进一步输入                                     5个答案

如何在textarea中设置maxlength? 以及为什么maxlength在textarea中无法正常工作?

9个解决方案

96 votes

在HTML5之前,我们有一种简单但可行的方法:首先在textarea元素中设置maxlength属性:

然后使用JavaScript限制用户输入:

$(function() {
$("textarea[maxlength]").bind('input propertychange', function() {
var maxLength = $(this).attr('maxlength');
if ($(this).val().length > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
}
})
});

确保同时绑定“ input”和“ propertychange”事件,以使其能够在各种浏览器(例如Firefox / Safari和IE)上运行。

aqingsao answered 2020-02-09T00:35:33Z
17 votes

如果您使用的是HTML 5,则需要在textarea声明中进行指定。

对于有效的HTML 5文档,它应以以下内容开头:

在HTML 5之前,textarea元素没有textarea属性。

您可以在DTD / spec中看到以下内容:

%attrs; -- %coreattrs, %i18n, %events --
name CDATA #IMPLIED
rows NUMBER #REQUIRED
cols NUMBER #REQUIRED
disabled (disabled) #IMPLIED -- unavailable in this context --
readonly (readonly) #IMPLIED
tabindex NUMBER #IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
onselect %Script; #IMPLIED -- some text was selected --
onchange %Script; #IMPLIED -- the element value was changed --
%reserved; -- reserved for possible future use --
>

为了限制textarea中键入的字符数,您需要将JavaScript与onChange事件一起使用。 然后,您可以计算字符数并禁止进一步输入。

这是有关文本输入以及如何使用服务器和客户端脚本来限制大小的深入讨论。

这是另一个示例。

Oded answered 2020-02-09T00:36:20Z
11 votes

在html4中为textarea做maxlength的简单方法是:

将“ 100”更改为任意多个字符

Dss answered 2020-02-09T00:36:45Z
7 votes

正如我在对aqingsao的答案的评论中说的那样,当textarea具有换行符时,至少在Windows上,它并不能完全起作用。

我因此略微更改了他的答案:

$(function() {
$("textarea[maxlength]").bind('input propertychange', function() {
var maxLength = $(this).attr('maxlength');
//I'm guessing JavaScript is treating a newline as one character rather than two so when I try to insert a "max length" string into the database I get an error.
//Detect how many newlines are in the textarea, then be sure to count them twice as part of the length of the input.
var newlines = ($(this).val().match(/\n/g) || []).length
if ($(this).val().length + newlines > maxLength) {
$(this).val($(this).val().substring(0, maxLength - newlines));
}
})
});

现在,当我尝试使用换行符粘贴大量数据时,我得到的字符数恰好正确。

Coxy answered 2020-02-09T00:37:14Z
1 votes
$(function(){
$("#id").keypress(function() {
var maxlen = 100;
if ($(this).val().length > maxlen) {
return false;
}
})
});
Sony Aja answered 2020-02-09T00:37:29Z
0 votes

在HTML5之前,只能使用JavaScript或通过服务器端验证进行检查(更好的方法是,因为JavaScript显然仅在启用JavaScript的情况下工作...)。 textareas没有本地的max-length属性。

由于HTML5是有效的属性,因此在HTML5中定义文档类型可能会有所帮助。 我不知道是否所有浏览器都支持此属性,但是:

acme answered 2020-02-09T00:37:54Z
0 votes

尝试这个

$(function(){
$("textarea[maxlength]")
.keydown(function(event){
return !$(this).attr("maxlength") || this.value.length < $(this).attr("maxlength") || event.keyCode == 8 || event.keyCode == 46;
})
.keyup(function(event){
var limit = $(this).attr("maxlength");
if (!limit) return;
if (this.value.length <= limit) return true;
else {
this.value = this.value.substr(0,limit);
return false;
}
});
});

对我来说,工作非常完美,而无需跳转/显示其他字符; 就像输入的maxlength一样工作

smnbbrv answered 2020-02-09T00:38:18Z
0 votes
function cnt(event)
{
document.getElementById("valmess2").innerHTML=""; // init and clear if b < max
allowed character
a = document.getElementById("msgc").value;
b = a.length;
if (b > 400)
{
document.getElementById("valmess2").innerHTML="the max length of 400 characters is
reached, you typed in " + b + "characters";
}
}

maxlength仅对HTML5有效。 对于HTML / XHTML,您必须使用JavaScript和/或PHP。 在PHP中,您可以使用strlen作为示例,该示例仅指示最大长度,不会阻塞输入。

Maxtor answered 2020-02-09T00:38:39Z
-1 votes

调整大小:无;此属性修复您的文本区域并对其进行绑定。您可以使用此CSS属性id作为textarea.gave文本区域的ID,并且可以代表该ID使用此CSS属性。

Muhammad Sanaullah khan answered 2020-02-09T00:38:59Z