html - 内容可编辑 div 复制粘贴限制
问题描述
我有一个带有编辑选项的消息框,当用户编辑消息时,我的按键限制设置为 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);
});
解决方案
到目前为止,使用 .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);
};
推荐阅读
- amazon-web-services - 如何在 AWS Cloudfront 中启用浏览器缓存
- asp.net-core - 带有角度模板的 Visual Studio 的 ASP.NET 核心始终返回 401
- javascript - 在 Typescript 模块中定义类
- asynchronous - 关于openai基线A2C实施的问题
- azure-aks - Azure Kubernetes 服务 (AKS) POD 文件资源管理器
- ethereum - Chainlink 多变量响应 - 结果未附加
- graphql - 如何通过 GraphQL 中的过滤器和顺序动态创建/获取数据?
- reactjs - React - Framer 运动:防止触发初始道具
- redis - NiFi - 在 Groovy 脚本中调用 Redis 命令
- android - 即使尝试多次,Android Studio 也无法打开