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

Question

我试图编写一个函数，当一个人试图粘贴一些文本时（例如：文本区/可编辑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区域

Answer 1

您必须阻止默认操作，而是手动插入（修改的）内容。 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>

Answer 2

完成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>

Answer 3

你可以使用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>