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

Posted 2021-03-29

我试图编写一个函数，当一个人试图粘贴一些文本时（例如：文本区/可编辑div）运行该函数应该检查文本是否大于10个字符，如果文本是该函数应该只保留前10个字符并将它们粘贴到（文本区/可编辑Div）。

我试图使用剪贴板api来处理这个，但我找不到粘贴修改后的文本的方法。

html

<div id='editableDiv' contenteditable='true'>Paste</div>

JS

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);

JS FIDDLE https://jsfiddle.net/swL8ftLs/12/

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

答案

您必须阻止默认操作，而是手动插入（修改的）内容。 MDN's page on the paste event有一个例子（在这种情况下，使文本大写）：

// (From https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event)

const target = document.querySelector('div.target');

target.addEventListener('paste', (event) => {
    let paste = (event.clipboardData || window.clipboardData).getData('text');
    paste = paste.toUpperCase();
 
    const selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();
    selection.getRangeAt(0).insertNode(document.createTextNode(paste));

    event.preventDefault();
});

<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>

另一答案

完成substring(0, 10操作后，只需将内容添加到div textContent属性中，您可以从event.target访问该属性：

function handlePaste (event) {
    var clipboardData, pastedData;
    // Stop data actually being pasted into div
    event.stopPropagation();
    event.preventDefault();
    // Get pasted data via clipboard API
    clipboardData = event.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    
   if(pastedData.length > 10){
     pastedData = pastedData.substring(0, 10);
   }
   event.target.textContent = pastedData;
}

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

<div id='source' contenteditable='true'>This is more than 10 characters</div>
<div id='target' contenteditable='true'>Paste here</div>

另一答案

你可以使用document.execCommand并使用insertHTML

function handlePaste (e) {
    var clipboardData, pastedData;
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');
    e.preventDefault()
    if (pastedData.length > 10) {
         console.log("its longer", pastedData.length);
         pastedData = pastedData.substring(0, 10);
    }
    document.execCommand("insertHTML", false, pastedData);
}

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

<div id='editableDiv' contenteditable='true'>Paste</div>

以上是关于如何在使用javascript粘贴之前修改复制的文本的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Cordova Android 应用程序中禁用复制粘贴、拼写检查、自动完成

怎么修改粘贴快捷键

如何在没有jsPDF的情况下使用javascript复制<div>元素的内容并将其粘贴到pdf [重复]

使用vi编辑器修改配置文件时,如何快速复制,粘贴多行文字内容

是否有一种标准方法可以将“复制和粘贴”Javascript 代码添加到 Django 项目中？

如何在 Javascript 中使用名称保存 textarea 中的文件？ [复制]