如何在使用javascript粘贴之前修改复制的文本

我正在尝试编写一个函数，当一个人试图将某些文本粘贴到（例如：文本区域/可编辑div）时，该函数将检查文本是否大于10个字符，如果文本为，则该函数应仅保留前10个字符，并将其粘贴到（文本区域/可编辑div）

我曾尝试使用剪贴板api来处理此问题，但找不到粘贴修改后的文本的方法

HTML

JS小提琴

---

我希望结果只将第一个字符粘贴到div区域

您必须阻止默认操作，而是手动插入（修改的）内容。有一个例子（在本例中，使文本大写）：

/（来自https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event)
const target=document.querySelector（'div.target'）；
target.addEventListener（'paste'，（事件）=>{
让粘贴=（event.clipboardData | | window.clipboardData）.getData（'text'）；
paste=paste.toUpperCase（）；
const selection=window.getSelection（）；
如果（！selection.rangeCount）返回false；
selection.deleteFromDocument（）；
selection.getRangeAt（0）.insertNode（document.createTextNode（粘贴））；
event.preventDefault（）；
});
尝试从此框复制文本。。。
…并在执行
子字符串（0，10
）操作后将其粘贴到此
中，只需将内容添加到
div
textContent
属性中，即可从
事件访问该属性。target
：


函数句柄粘贴（事件）{
var剪贴簿数据，粘贴数据；
//停止将数据实际粘贴到div中
event.stopPropagation（）；
event.preventDefault（）；
//通过剪贴板API获取粘贴的数据
clipboardData=event.clipboardData | | window.clipboardData；
pastedData=clipboardData.getData（'Text'）；
如果（粘贴数据长度>10）{
pastedData=pastedData.substring（0,10）；
}
event.target.textContent=pastedData；
}
document.getElementById（'target'）。addEventListener（'paste'，handlePaste）
这超过10个字符
粘贴到此处
您可以使用
document.execCommand
和
insertHTML


功能手柄固定（e）{
var剪贴簿数据，粘贴数据；
clipboardData=e.clipboardData | | window.clipboardData；
pastedData=clipboardData.getData（'Text'）；
e、 预防默认值（）
如果（粘贴数据长度>10）{
log（“其较长”，pastedData.length）；
pastedData=pastedData.substring（0,10）；
}
document.execCommand（“insertHTML”，false，pastedData）；
}
document.getElementById（'editableDiv'）。addEventListener（'paste'，handlePaste）
粘贴
很遗憾，它在谷歌chrome上stackoverflow的搜索栏中不起作用。@jeiea-什么不起作用？
<div id='editableDiv' contenteditable='true'>Paste</div>

function handlePaste (e) {
        var clipboardData, pastedData;

        // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');

    //if pasted text is longer then 10 chars
       if (pastedData.length > 10) {
            console.log("its longer", pastedData.length);
            //we take only the first 10 chars
            var limitedData = pastedData.substring(0, 10);
   //  i want this text to be pasted
}

}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);