模拟HTML输入“maxlength”的最佳方式是什么？属性在HTML文本区？ [英] What is the best way to emulate an HTML input "maxlength" attribute on an HTML textarea?

问题描述

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

一个HTML textarea元素，另一方面，没有这个属性。我的目标是模拟HTML textarea上的maxlength行为。要求：

• 至少，显示用户输入的字符太多（CSS更改）。


• 理想情况下，阻止用户输入更多字符，就像在HTML输入中发生的那样。

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

我的问题是：在HTML textarea上模拟maxlength的最简洁的客户端方式是什么？理想情况下，指向您已使用过的经过验证的开源JavaScript代码。 解决方案

查看本站的评论，倒数。我以前就是这样做的，它简单而有效。 Stack  Overflow也很好地利用了颜色。

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

它在键入时运行一次倒计时。在接近阈值时，颜色从黄色变为红色。所有使用JavaScript，我假设textarea的keyup事件。

编辑：如何使用jQuery完成它？

 < script language =javascripttype =text / javascriptsrc =js / jquery-1.2.6.min.js>< / script> 
< script language =javascripttype =text / javascript> 
 $（document）.ready（function（）{
 setMaxLength（）; 
 $（textarea.checkMax）。bind（click mouseover keyup change，function（）{checkMaxLength （this.id）;}）
}）; 
 
函数setMaxLength（）{
 $（textarea.checkMax）。each（function（i）{
 intMax = $（this）.attr（maxlength） ; 
 $（this）.after（< div>< span id ='+ this.id +Counter'>+ intMax +< / span>剩余< / div>）; 
}）; 
 
 
函数checkMaxLength（strID）{
 intCount = $（＃+ strID）.val（）。length; 
 intMax = $（＃+ strID）.attr（maxlength）; 
 strID =＃+ strID +Counter; 
 $（strID）.text（parseInt（intMax） -  parseInt（intCount））; （intCount<（intMax * .8））{$（strID）.css（color，＃006600）; 
 if如果（intCount>（intMax * .8））{$（strID）.css（color，＃FF9933）; if（intCount>（intMax））{$（strID）.text（0）.css（color，＃990000）; //警告80％
 if } //超过
} 
< / script> 
  

HTML是

 < textarea id =textmaxlength =250class =checkMax>< / textarea> 
  

An HTML text input has an attribute called "maxlength", implemented by browsers, which if set blocks user input after a certain number of characters.

An HTML textarea element, on the other hand, does not have this attribute. My goal is to emulate the behavior of maxlength on an HTML textarea. Requirements:

• At a minimum, show (CSS change) that the user typed in too many characters.
• Ideally, block the user from typing more characters, as happens on an HTML input.

It is understood that server-side validation should check the length again. Here I am focusing on the client-side part only.

My question is: what is the cleanest client-side way of emulating maxlength on an HTML textarea? Ideally, point to a proven, open source, piece of JavaScript that you have used.

解决方案

Look at the comments on this site, with a count down. I have done it like this before, and it is simple and effective. Stack Overflow makes good use of color too.

Perhaps you don't have enough rep to see the comment box.

It runs a little countdown while you type. At it approaches a threshold, the color changes from yellow to red. All using JavaScript, and I assume the keyup event of the textarea.

EDIT: How about having it done with 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>

And the HTML is

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

这篇关于模拟HTML输入“maxlength”的最佳方式是什么？属性在HTML文本区？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！