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

Posted 2023-03-17

【中文标题】内容可编辑 div 复制粘贴限制

【英文标题】：Content Editable Div Copy&Paste Limit

【发布时间】：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 个字符后的内容。

是的，我一直在阅读这个。打算试一试，尽管它需要另一个功能..谢谢

【参考方案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);
;