7赞

HTML <textarea>的最大长度

作者：家具销售_903 | 2023-09-05 19:56

如何解决《HTML<textarea>的最大长度》经验，为你挑选了2个好方法。

如何限制可以输入HTML的最大字符数</code>？我正在寻找一个跨浏览器的解决方案.</p><br><br><b>1> Espo..：</b><hr><p>该<code>TEXTAREA</code>标签没有<code>MAXLENGTH</code>属性,该属性的方式 <code>INPUT</code>标记确实,至少在大多数标准的浏览器不.一个非常简单而有效的方式来限制可以字符数<em>输入</em>到<code>TEXTAREA</code>标签是:</p> <pre class="brush:bash;"><textarea onKeyPress="return ( this.value.length < 50 );">

注意: onKeyPress,将阻止按任何按钮, 包括退格键的任何按钮.



这是有效的,因为布尔表达式将新字符添加到所需的最大长度之前的字段长度进行比较(在此示例中为50,在此处使用您自己的长度),如果还有一个空间,false则返回true,否则返回true .从大多数事件返回false会取消默认操作.因此,如果当前长度已经是50(或更多),则处理程序返回false,KeyPress操作将被取消,并且不会添加该字符.

美中不足的是,有可能粘贴到一个TEXTAREA不会导致KeyPress事件发生的情况下,绕过这个检查.Internet Explorer 5+包含一个onPaste事件,其处理程序可以包含该检查.但是,请注意,您还必须考虑在剪贴板中等待的字符数,以确定总数是否会超过限制.幸运的是,IE还包含来自window对象的剪贴板对象.1因此:




同样,onPaste事件和clipboardData对象仅为IE 5+.对于跨浏览器解决方案,您只需使用OnChange或OnBlur处理程序来检查长度,并根据需要处理它(静默截断值,通知用户等).不幸的是,只有当用户试图离开现场时,这并没有发现错误,这种情况并不那么友好.

资源

此外,还有另一种方法,包括您可以在页面中包含的完成脚本:

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

        
请注意,上面写的onKeyPress函数将阻止在命中字符限制后在textarea中输入任何文本 - 不能删除任何字符.更强大的代码段将允许用户达到最大限制,然后退格以删除字符以使文本低于限制. 

2> indusBull..：
HTML5现在允许maxlength属性</code>.</p>

<p>除了IE <= 9和iOS Safari 8.4之外,所有浏览器都支持它.请参阅caniuse.com上的支持表.</p></p>
        <hr>这个链接不是W3C,它是W3Schools,以提供不正确的信息而闻名.     </div>

    <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;">

    </div>

    <div class="article_recommend">
        <div class="list_top">推荐阅读</div>
        <div class="ListItems">
            <ul class="NewsList">
                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/PingFanDeMoRenKe_bf06e57f.html" target="_blank" title="平凡的默认可构造std :: optional和std :: variant">平凡的默认可构造std :: optional和std :: variant</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《平凡的默认可构造std::optional和std::variant》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/PingFanDeMoRenKe_bf06e57f.html" target="_blank" title="平凡的默认可构造std :: optional和std :: variant">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WeiShiMe_foo-1-2_61d48848.html" target="_blank" title="为什么foo(1,2,3)没有作为整数[]传递给varargs方法foo(Object ...)">为什么foo(1,2,3)没有作为整数[]传递给varargs方法foo(Object ...)</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《为什么foo(1,2,3)没有作为整数[]传递给varargs方法foo(Object)》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/WeiShiMe_foo-1-2_61d48848.html" target="_blank" title="为什么foo(1,2,3)没有作为整数[]传递给varargs方法foo(Object ...)">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/SIG33_ZaiDiaoShi_7a646373.html" target="_blank" title="SIG33在调试原生Android时">SIG33在调试原生Android时</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《SIG33在调试原生Android时》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/SIG33_ZaiDiaoShi_7a646373.html" target="_blank" title="SIG33在调试原生Android时">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_MKMapVie_9c004b29.html" target="_blank" title="如何在MKMapView Swift中放大图钉">如何在MKMapView Swift中放大图钉</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在MKMapViewSwift中放大图钉》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_MKMapVie_9c004b29.html" target="_blank" title="如何在MKMapView Swift中放大图钉">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_AndroidS_0d775f35.html" target="_blank" title="如何在Android Studio中切换android源码？">如何在Android Studio中切换android源码？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在AndroidStudio中切换android源码？》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_AndroidS_0d775f35.html" target="_blank" title="如何在Android Studio中切换android源码？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeShiYong_Fire_0ce8655f.html" target="_blank" title="如何使用Firebase在Angular项目中构建/更新数据">如何使用Firebase在Angular项目中构建/更新数据</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何使用Firebase在Angular项目中构建/更新数据》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeShiYong_Fire_0ce8655f.html" target="_blank" title="如何使用Firebase在Angular项目中构建/更新数据">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeShiYong_Pica_ff92e353.html" target="_blank" title="如何使用Picasso将位图加载到图像视图中">如何使用Picasso将位图加载到图像视图中</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何使用Picasso将位图加载到图像视图中》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeShiYong_Pica_ff92e353.html" target="_blank" title="如何使用Picasso将位图加载到图像视图中">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_VisualStudio_5b56ca68.html" target="_blank" title="在Visual Studio C++调试会话期间找出当前目录">在Visual Studio C++调试会话期间找出当前目录</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在VisualStudioC++调试会话期间找出当前目录》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_VisualStudio_5b56ca68.html" target="_blank" title="在Visual Studio C++调试会话期间找出当前目录">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeGenJuRiQiDin_f4b450dc.html" target="_blank" title="如何根据日期订购数组？">如何根据日期订购数组？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何根据日期订购数组？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeGenJuRiQiDin_f4b450dc.html" target="_blank" title="如何根据日期订购数组？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/JointJs_RuHeShiL_98c34ff0.html" target="_blank" title="JointJs如何使链接相互避免.不要搞砸了">JointJs如何使链接相互避免.不要搞砸了</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/JointJs_RuHeShiL_98c34ff0.html" target="_blank" title="JointJs如何使链接相互避免.不要搞砸了"><img src="https://img.devbox.cn/3cccf/16086/243/3acb21bfbb644443.png" width="120" height="70" alt="JointJs如何使链接相互避免.不要搞砸了"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《JointJs如何使链接相互避免.不要搞砸了》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/JointJs_RuHeShiL_98c34ff0.html" target="_blank" title="JointJs如何使链接相互避免.不要搞砸了">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ZiDongJiang_csv__8011694e.html" target="_blank" title="自动将csv文件转换为Excel表格？">自动将csv文件转换为Excel表格？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/ZiDongJiang_csv__8011694e.html" target="_blank" title="自动将csv文件转换为Excel表格？"><img src="https://img.devbox.cn/3cccf/16086/243/f2df7201c768447f.png" width="120" height="70" alt="自动将csv文件转换为Excel表格？"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《自动将csv文件转换为Excel表格？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ZiDongJiang_csv__8011694e.html" target="_blank" title="自动将csv文件转换为Excel表格？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WeiShiMe_--39;-=_ce3b3688.html" target="_blank" title="为什么'+ ='不能用于隐式解包的选项？">为什么'+ ='不能用于隐式解包的选项？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《为什么'+='不能用于隐式解包的选项？》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/WeiShiMe_--39;-=_ce3b3688.html" target="_blank" title="为什么'+ ='不能用于隐式解包的选项？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/std--enable_shar_432763db.html" target="_blank" title="std :: enable_shared_from_this :: shared_from_this如何工作">std :: enable_shared_from_this :: shared_from_this如何工作</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《std::enable_shared_from_this::shared_from_this如何工作》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/std--enable_shar_432763db.html" target="_blank" title="std :: enable_shared_from_this :: shared_from_this如何工作">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/YanShengPinZai_p_cd0ba18b.html" target="_blank" title="衍生品在python中爆炸">衍生品在python中爆炸</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/YanShengPinZai_p_cd0ba18b.html" target="_blank" title="衍生品在python中爆炸"><img src="https://img.devbox.cn/3cccf/16086/243/437304056ee096d0.png" width="120" height="70" alt="衍生品在python中爆炸"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《衍生品在python中爆炸》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/YanShengPinZai_p_cd0ba18b.html" target="_blank" title="衍生品在python中爆炸">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/C-_TongGuoDongTa_7771fc3f.html" target="_blank" title="C#通过动态格式化其名称来调用变量">C#通过动态格式化其名称来调用变量</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《C#通过动态格式化其名称来调用变量》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/C-_TongGuoDongTa_7771fc3f.html" target="_blank" title="C#通过动态格式化其名称来调用变量">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/TongGuoTuiWenWei_2f9bb6c4.html" target="_blank" title="通过推文位置和用户位置来抓取推文">通过推文位置和用户位置来抓取推文</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《通过推文位置和用户位置来抓取推文》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/TongGuoTuiWenWei_2f9bb6c4.html" target="_blank" title="通过推文位置和用户位置来抓取推文">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/java-lang-Linkag_a52204fa.html" target="_blank" title="java.lang.LinkageError:MainActivity">java.lang.LinkageError:MainActivity</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《java.lang.LinkageError:MainActivity》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/java-lang-Linkag_a52204fa.html" target="_blank" title="java.lang.LinkageError:MainActivity">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_TypeScript_Z_56ac563b.html" target="_blank" title="在TypeScript中使用clipboardData">在TypeScript中使用clipboardData</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在TypeScript中使用clipboardData》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_TypeScript_Z_56ac563b.html" target="_blank" title="在TypeScript中使用clipboardData">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WeiShiMeWoDeMoSh_797b555e.html" target="_blank" title="为什么我的模式("yyyyMM")无法使用DateTimeFormatter进行解析(java 8)">为什么我的模式("yyyyMM")无法使用DateTimeFormatter进行解析(java 8)</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《为什么我的模式("yyyyMM")无法使用DateTimeFormatter进行解析(java8)》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/WeiShiMeWoDeMoSh_797b555e.html" target="_blank" title="为什么我的模式("yyyyMM")无法使用DateTimeFormatter进行解析(java 8)">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/android_GongJuLa_15415508.html" target="_blank" title="android工具栏popupTheme vs主题">android工具栏popupTheme vs主题</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《android工具栏popupThemevs主题》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/android_GongJuLa_15415508.html" target="_blank" title="android工具栏popupTheme vs主题">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                

            </ul>
        </div>
    </div>

    <div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">吐了个 "CAO" !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册