内容可编辑 div 复制粘贴限制答案

【问题标题】：Content Editable Div Copy&Paste Limit内容可编辑 div 复制粘贴限制
【发布时间】：2019-04-18 13:13:30
【问题描述】：

我有一个带有编辑选项的消息框，当用户编辑消息时，我的按键限制设置为 300 个字符，但是当我复制和粘贴时超出了限制，而我的 Jscript 限制代码没有影响。

任何人都可以看到我在下面的代码中哪里出错了。请，谢谢。

var ebm=document.getElementById('editSeller'+varmessageid+'');


                        var messbox=$(ebm).text();
                        var messlength = messbox.length;
                        var amount=300;
                        var leftlength=amount-messlength;



                                //delete & backspace keys
                            document.addEventListener('keyup', function(event) {
                                const key = event.key;
                                if (key === "Backspace" || key === "Delete") {

                                 var messbox=$(ebm).text();
                                var messlength = messbox.length;
                                var amount=300;
                                var leftlength=amount-messlength;


                                    if (leftlength <1 ) {leftlength=0
                                    $(ebm).css('border', '1px dashed red');
                                    event.preventDefault();
                                    }
                                        else {
                                        $(ebm).css('border', '1px dashed #07f310');
                                        }



                                $('#CSeller'+varmessageid+'').text('Characters Left: '+leftlength);
                                 }
                            });


 //ascii keys
                             $(ebm).on('keypress', function(e){



                                var messbox=$(ebm).text();
                                var messlength = messbox.length;
                                var amount=299;
                                var leftlength=amount-messlength;


                                    if (leftlength <1 ) {leftlength=0
                                    $(ebm).css('border', '1px dashed red');
                                    e.preventDefault();
                                    }
                                        else  {
                                        $(ebm).css('border', '1px dashed #07f310');
                                        }



                                $('#CSeller'+varmessageid+'').text('Characters Left: '+leftlength);



                            });

【问题讨论】：

这是复制粘贴问题，我解决了 ContentEditable div 中字符数的限制
您可以触发 ctrl+v 事件并获取该 div 内的实时字符长度并使用子字符串修剪 300 个字符后的内容。
是的，我一直在阅读这个。打算试一试，尽管它需要另一个功能..谢谢

标签： html keypress jscript

【解决方案1】：

使用 .onpaste 添加了如下另一个功能到目前为止似乎工作得很好......

尚未检查浏览器兼容性。

var ebm=document.getElementById('editSeller'+varmessageid+'');

   ebm.onpaste = function(event){
     var messbox=$(ebm).text();
     var messlength = messbox.length;
     var amount=300;
     var leftlength=amount-messlength;


    if (leftlength <1 ) {leftlength=0
     $(ebm).css('border', '1px dashed red');
      event.preventDefault();
       }

       else {
           $(ebm).css('border', '1px dashed #07f310');
          }

        $('#CSeller'+varmessageid+'').text('Characters Left: '+leftlength);
};

【讨论】：