Javascript 如何使复制粘贴事件在文本区域中工作？

我创建了一个文本框，类似于Twitter在发帖时使用的文本框，包括右下角的蓝色进度条SVG圆圈，该圆圈根据您键入的字母数缓慢增加，超过最大字符数时变为红色

到目前为止，我的工作与文本有关。但是，当我复制粘贴文本时，它会有一点中断。这里有一个例子

有什么方法可以让它工作，即使我复制粘贴文本

我的代码

var-orb=（函数（）{
var progress=document.querySelector（'.progress'），
textarea=document.querySelector（'textarea'），
计数器=document.querySelector（'.counter'）；
/**
*抓取元素
*/
var tweetLength=40，
警告区=数学楼层（tweetLength*（1/2）），
dangerZone=数学楼层（tweetLength*（3/4））；
/**
*设置短划线阵列/偏移
*/
var pathLength=Math.PI*（progress.getAttribute（'r'）*2）；
progress.style.strokedashcoffset=路径长度+px'；
progress.style.strokeDasharray=路径长度+'px'；
/**
*关于键控
*/
textarea.addEventListener（'keydown'，函数（事件）{
var len=textarea.value.length，
per=textarea.value.length/tweetLength；
var handleProgress=函数（）{
if（长警告区和长<危险区）；
progress.classList.toggle（'danger'，len>=dangerZone）；
progress.classList.toggle（'悲剧'，len==tweetLength）；
}
手色（）；
var handleCounter=函数（）{
counter.textContent=tweetLength-len；
counter.classList.toggle（'danger'，len>=tweetLength）；
}
handleCounter（）；
});
}());
html{
框大小：边框框；}
*，*：之前，*：之后{
框大小：继承；}
身体{
颜色：#777；
文本对齐：居中；
字体系列：蒙特塞拉特，无衬线；
字体大小：100%；
背景图片：url（“../img/happy.png”）；
背景位置：50%12em；
背景重复：无重复；
背景大小：85%；
高度：100vh；
边距：0；}
形式{
位置：相对位置；
保证金：0px自动；
宽度：25em；}
文本区{
颜色：#333；
字号：0.9em；
字体家族：继承；
边框：2倍实心#333；
背景：#fff；
边界半径：0.333em；
大纲：无；
显示：块；
填充：0.6em；
最大宽度：100%；
宽度：100%；
高度：100px；}
.柜台{
颜色：#777；
字号：0.8125em；
位置：绝对位置；
底部：0.625em；
右：0.80em；}
svg{
变换：旋转（-90度）；}
svg圆{
填充：无；
笔划宽度：1；}
.底垫{
笔划：#ccc；}
.进展{
颜色：#1da1f2；
笔画宽度：3；
过渡：.2s笔划宽度缓进缓出；}
/*颜色*/
.安全{
颜色：#1da1f2；}
.警告{
颜色：#ffad1f；}
.危险{
颜色：#e0245e；}
.悲剧{
笔画宽度：5；
动画：闪烁。4s放松；}
@关键帧闪烁{
0% {
笔划宽度：5；}
10% {
笔划宽度：10；}
100% {
笔划宽度：5；}
/*#sourceMappingURL=style.css.map*/

抓住我，宝贝
最好使用“keyup”，我会更改您的js代码：

 var orb = (function () {
        var progress = document.querySelector('.progress'),
            textarea = document.querySelector('textarea'),
            counter = document.querySelector('.counter');


        /**
         * GRAB ELEMENTS
         */


        var tweetLength = 40,
            warningZone = Math.floor(tweetLength * (1 / 2)),
            dangerZone = Math.floor(tweetLength * (3 / 4));


        /**
         * SET DASH-ARRAY/OFFSET
         */
        var pathLength = Math.PI * (progress.getAttribute('r') * 2);

        progress.style.strokeDashoffset = pathLength + 'px';
        progress.style.strokeDasharray = pathLength + 'px';


        /**
         * ON KEYDOWN
         */
        textarea.addEventListener('keyup', function (event) {

            var len = textarea.value.length,
                per = textarea.value.length / tweetLength;

            var handleProgress = function () {
                if (len <= tweetLength) {
                    var newOffset = pathLength - (pathLength * per) + 'px';
                    progress.style.strokeDashoffset = newOffset;
                }
            }
            handleProgress();

            var handleColours = function () {
                progress.classList.toggle('warn', len > warningZone && len < dangerZone);
                progress.classList.toggle('danger', len > dangerZone);
                progress.classList.toggle('tragedy', len >= tweetLength);
                if (len >= tweetLength) {
                    progress.style.strokeDasharray = 0 + 'px';
                }else{
                    progress.style.strokeDasharray = pathLength + 'px';

                }
            }
            handleColours();

            var handleCounter = function () {
                counter.textContent = tweetLength - len;
                counter.classList.toggle('danger', len >= tweetLength);
            }
            handleCounter();

        });

    }());

var-orb=（函数（）{
var progress=document.querySelector（'.progress'），
textarea=document.querySelector（'textarea'），
计数器=document.querySelector（'.counter'）；
/**
*抓取元素
*/
var tweetLength=40，
警告区=数学楼层（tweetLength*（1/2）），
dangerZone=数学楼层（tweetLength*（3/4））；
/**
*设置短划线阵列/偏移
*/
var pathLength=Math.PI*（progress.getAttribute（'r'）*2）；
progress.style.strokedashcoffset=路径长度+px'；
progress.style.strokeDasharray=路径长度+'px'；
/**
*关于键控
*/
textarea.addEventListener（'keyup'，函数（事件）{
var len=textarea.value.length，
per=textarea.value.length/tweetLength；
var handleProgress=函数（）{
if（长警告区和长<危险区）；
progress.classList.toggle（'danger'，len>dangerZone）；
progress.classList.toggle（'悲剧'，len>=tweetLength）；
如果（len>=tweetLength）{
progress.style.strokeDasharray=0+'px'；
}否则{
progress.style.strokeDasharray=路径长度+'px'；
}
}
手色（）；
var handleCounter=函数（）{
counter.textContent=tweetLength-len；
counter.classList.toggle（'danger'，len>=tweetLength）；
}
handleCounter（）；
});
}());
我也使用了
keyup


我更改了
handleCounter（）
函数和
handleProgress（）
中的一点
由于粘贴时您没有提到字符串长度大于40时要做什么，因此我认为最好将
slice（）
字符串设置为前40个字符，结果如下。

在
handleCounter（）
中，如果用户一次按下超过40个字符，则执行
If
条件，显然
len
超过40会导致计数器中出现负值，但这是可以管理的。这是因为
keyup


var counter=document.getElementsByClassName（'counter'）[0]；
var maxCount=40；
var warningZone=数学楼层（最大计数*（1/2））；
var dangerZone=数学楼层（最大计数*（3/4））；
counter.innerHTML=maxCount；
var textArea=document.getElementsByTagName（'textArea'）[0]；
var progress=document.querySelector（'.progress'）；
var pathLength=Math.PI*（progress.getAttribute（'r'）*2）；
progress.style.strokedashcoffset=路径长度+px'；
progress.style.strokeDasharray=路径长度+'px'；
函数fun（）{
var len=textArea.value.length；
var per=textArea.v