关于超过文本框限定字数后，不让输入的问题

向右看齐 2022-01-21 10:45 631阅读 0赞

对此问题，一般是用**maxlength**属性来限制输入的字数，但由于我还有个需求是：显示剩余可输入字数，故需用到js。

先是参考了该博客：[JavaScript监控输入框字数变化，超出限制则禁止输入][JavaScript]，对于输入，基本没问题，但是对于粘贴情况，出现了一点小问题，如下图：此时粘贴字数已经达到100字，且无法再输入，但是显示的数量是92，删除一个字后数量为99。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0ODkwOTAx_size_16_color_FFFFFF_t_70][]  
后又尝试该博客的方法：[js限制字数的输入][js]，使用onkeyup和onkeydown属性，但对应的js方法还是使用的刚刚参考的那个博客的方法，同样的，在粘贴的时候有一点小问题，当字数已经达到100时，超出的字还是可以粘贴闪现的，只是不会最后输入在文本框中。

于是将maxlength属性和参考的第一个博客的方法结合，对于输入和粘贴均适合。如下：

###### html页面文本框 ######

###### js部分 ######

/* 此方法兼容大部分浏览器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
             监听输入框字数变化*/
    function OnInput(event, length, id) {
    	if(event.srcElement.value.length <= length) {
    		$("#" + id).html(event.srcElement.value.length);
    		}
    	}
    
    
    
    //此方法仅适用于IE浏览器
    function OnPropChanged(event, length, id) {
    
        if(event.srcElement.value.length <= length) {
            $("#" + id).html(event.srcElement.value.length);
        }
    }

以上是今天解决问题的过程记录，本来前两天就该解决的，刚好遇到端午放假就玩去了(๑´ㅂ\`๑)，  
如果还有改善的地方，欢迎指教！

[JavaScript]: https://www.cnblogs.com/CodeKjm/p/8000863.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0ODkwOTAx_size_16_color_FFFFFF_t_70]: /images/20220121/fa244c0fd1324346951e67c1d4119e1e.png
[js]: https://www.cnblogs.com/liu-heng/p/6835085.html