在HTML textarea上模拟HTML输入"maxlength"属性的最佳方法是什么？

Question

HTML文本输入具有称为"maxlength"的属性,由浏览器实现,如果设置在一定数量的字符之后阻止用户输入.

另一方面,HTML textarea元素没有此属性.我的目标是模拟HTML textarea上maxlength的行为.要求:

• 至少,显示(CSS更改)用户键入太多字符.
• 理想情况下,阻止用户输入更多字符,就像在HTML输入上一样.

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

我的问题是:在HTML textarea上模拟maxlength的最干净的客户端方法是什么？理想情况下,指向您使用过的经过验证的开源JavaScript代码.

Answer 1

查看本网站上的评论,倒计时.我以前这样做过,简单有效.Stack Overflow也很好地利用了颜色.

也许你没有足够的代表来看评论框.

当你输入时,它会运行一些倒计时.当它接近阈值时,颜色从黄色变为红色.全部使用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>

Answer 2

我在这里发现了一个很好的脚本,它阻止用户在输入字符串的长度超过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中轻松解决.

Answer 3

PPK的Textarea Maxlength脚本可以在他的网站上找到.没什么特别的,只是简单的旧JavaScript.

您可以轻松地将此作为起点,并进行更改以适应您的CSS"通知"要求.

请注意,作者声明:"我的脚本的目的不是强制执行最大长度,尽管可以很容易地更改它.但是,我决定限制我的脚本在用户超过最大数量时给出礼貌的提醒人物."

更新: 由于附加文章中的linkrot,以下是该链接上曾经存在的代码:

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();在加载时调用该函数.