在 HTML 文本区域上模拟 HTML 输入“maxlength”属性的最佳方法是啥？

Posted 2023-05-07

【中文标题】在 HTML 文本区域上模拟 HTML 输入“maxlength”属性的最佳方法是啥？

【英文标题】：What is the best way to emulate an HTML input "maxlength" attribute on an HTML textarea?在 HTML 文本区域上模拟 HTML 输入“maxlength”属性的最佳方法是什么？

【发布时间】：2010-10-01 21:03:32

【问题描述】：

html 文本输入有一个名为“maxlength”的属性，由浏览器实现，如果设置了该属性，则会在一定数量的字符后阻止用户输入。

另一方面，HTML textarea 元素没有此属性。我的目标是在 HTML 文本区域上模拟 maxlength 的行为。要求：

至少显示（CSS 更改）用户输入的字符过多。 理想情况下，阻止用户输入更多字符，就像在 HTML 输入中那样。

据了解，服务器端验证应该再次检查长度。这里我只关注客户端部分。

我的问题是：在 HTML 文本区域上模拟 maxlength 的最简洁的客户端方法是什么？理想情况下，请指向您使用过的经过验证的开源 javascript 片段。

【问题讨论】：

***.com/questions/378294/…>

What is the best way to limit the amount of text that can be entered into a 'textarea'?的可能重复

【参考方案1】：

看看这个网站上的 cmets，倒计时。我以前也这样做过，简单有效。 *** 也很好地利用了颜色。

也许您没有足够的代表来查看评论框。

当您键入时，它会运行一点倒计时。在接近阈值时，颜色从黄色变为红色。全部使用 JavaScript，我假设 textarea 的 keyup 事件。

编辑：用 jQuery 完成它怎么样？

<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready( function () 
        setMaxLength();
        $("textarea.checkMax").bind("click mouseover keyup change", function()checkMaxLength(this.id);  )
    );

    function setMaxLength() 
        $("textarea.checkMax").each(function(i)
            intMax = $(this).attr("maxlength");
            $(this).after("<div><span id='"+this.id+"Counter'>"+intMax+"</span> remaining</div>");
        );
    

    function checkMaxLength(strID)
        intCount = $("#"+strID).val().length;
        intMax = $("#"+strID).attr("maxlength");
        strID = "#"+strID+"Counter";
        $(strID).text(parseInt(intMax) - parseInt(intCount));
        if (intCount < (intMax * .8)) $(strID).css("color", "#006600");  //Good
        if (intCount > (intMax * .8))  $(strID).css("color", "#FF9933");  //Warning at 80%
        if (intCount > (intMax))  $(strID).text(0).css("color", "#990000");  //Over
    
</script>

HTML 是

<textarea id="text" maxlength="250" class="checkMax"></textarea>

【讨论】：

请注意：您的变量没有使用var 关键字显式声明，因此会被注入到全局命名空间中。这被认为是不好的做法，可能会导致严重的问题。

【参考方案2】：

我发现了一个很好的脚本here，它可以在输入字符串的长度超过 MaxLen 参数后阻止用户输入更多文本，它具有不可否认的好处，即大部分时间都不会出现在用户面前。

我对该脚本的问题是它还阻止了导航键（箭头，主页，结束）以及退格和删除，所以我稍微修改了它，否则用户无法删除他输入的文本，如果他到达MaxLen 设置的限制（这会有点搞笑：P）。

Javascript：

function imposeMaxLength(Event, Object, MaxLen)

        return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))

以及随之而来的 HTML：

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

用户仍然可以通过将文本粘贴到 textarea 中来绕过这个限制，但这可以在 imposeMaxLength 中轻松解决。

【讨论】：

能否详细说明如何克服粘贴问题？据我所知，当用户右键单击粘贴文本时，onkeypress 不会触发。

一切正常。但正如您所提到的，用户可以通过粘贴文本来解决问题。可以使用“onchange”来克服吗？你能解释一下吗？

@dev 很抱歉我含糊其辞，我不记得我当时在想什么，但“onchange”听起来不错。另外应该提到的是，无论您在客户端做什么，都必须在服务器端验证它。

【参考方案3】：

PPK's Textarea Maxlength 脚本可在他的网站上找到。没什么花哨的，只是普通的旧 JavaScript。

您可以轻松地以此为起点并进行更改以适应您的 CSS“通知”要求。

请注意，作者声明：“我的脚本的目的不是强制执行最大长度，尽管可以很容易地更改它来做到这一点。但是，我决定限制我的脚本，以便在用户超过时给予礼貌提醒最大字符数。”

更新： 由于附加文章中的链接腐烂，这里是曾经存在于该链接上的代码：

HTML：

<textarea id="text" name="text" maxlength="1250"></textarea>

JS：

function setMaxLength() 
    var x = document.getElementsByTagName('textarea');
    var counter = document.createElement('div');
    counter.className = 'counter';
    for (var i=0;i<x.length;i++) 
        if (x[i].getAttribute('maxlength')) 
            var counterClone = counter.cloneNode(true);
            counterClone.relatedElement = x[i];
            counterClone.innerHTML = '<span>0</span>/'+x[i].getAttribute('maxlength');
            x[i].parentNode.insertBefore(counterClone,x[i].nextSibling);
            x[i].relatedElement = counterClone.getElementsByTagName('span')[0];

            x[i].onkeyup = x[i].onchange = checkMaxLength;
            x[i].onkeyup();
        
    


function checkMaxLength() 
    var maxLength = this.getAttribute('maxlength');
    var currentLength = this.value.length;
    if (currentLength > maxLength)
        this.relatedElement.className = 'toomuch';
    else
        this.relatedElement.className = '';
    this.relatedElement.firstChild.nodeValue = currentLength;
    // not innerHTML

只需在加载时调用setMaxLength(); 函数。

【讨论】：

不幸的是，这个答案有链接失效。始终包含代码示例以获得高质量的答案！

@rickyduck 感谢您更新答案；非常感谢。

【参考方案4】：

下面是对我来说可以正常工作的 JavaScript 代码：

onBlur="if (this.value.length > 500)  alert('The notes field only allows 500 characters. You have ' + this.value.length + ' characters.'); this.focus(); return false; "

【参考方案5】：

我认为以下内容尽可能“干净”。在 Javascript 中创建一个事件处理程序，将 keydown 事件和 textarea 字段作为输入。检查此处理程序中字段中文本的长度，如果达到最大长度则返回 false。 （当然在返回之前进行任何 css 样式切换）。否则返回真。文本区域应如下所示。

<textarea onkeydown="return checkMaxLength(event, this, 1000);"></textarea>

【参考方案6】：

使用 JavaScript 框架（Prototype、jQuery 等），以便获得跨浏览器事件支持。在keyup 上写一行以防止用户输入最大长度。

注意：您还必须检查服务器端的长度。

【参考方案7】：

我想我可以试一试，这只是做同样事情的另一种方式。我喜欢这种方式，因为您可以将其包装在一些代码中以检查您是否在 IE 中运行，因为 maxlength 确实适用于 webkit 和 gecko 浏览器中的文本区域。它取决于在 html 中的 textarea 元素上设置的 maxlength 属性。也因为它实际上作为 maxlength 属性在默认情况下在浏览器中工作，防止用户添加超过指定的字符。

$(document).ready(function () 


$('textarea').on('keyup', function () 
    // Store the maxlength and value of the field.
    if (!maxlength) 
        var maxlength = $(this).attr('maxlength');
    
    var val = $(this).val();
    var vallength = val.length;

    // alert
    if (vallength >= maxlength) 


        alert('Please limit your response to ' + maxlength + ' characters');
        $(this).blur();
    


    // Trim the field if it has content over the maxlength.
    if (vallength > maxlength) 
        $(this).val(val.slice(0, maxlength));
    
);

//remove maxlength on blur so that we can reset it later.
$('textarea').on('blur', function () 
        delete maxlength;
    );
);

【参考方案8】：

这是我使用的一个名为“Simply Countable”的 jQuery 插件，它允许您向文本区域添加计数器。其中一项功能是它允许您设置字段中允许的最大字符数，并且它会强制执行它，因此用户不能超过该限制。

这是 Simply Countable 的 GitHub 页面：https://github.com/aaronrussell/jquery-simply-countable/

你会这样使用它...

$('#my_textarea').simplyCountable(
    counter: '#counter',
    maxCount: 140,
    strictMax: true
);