Как изменить скопированный текст перед вставкой с использованием 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/

Я ожидаю, что результат вставит только первые символы вПлощадь

Answer 1

После выполнения операции 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 2

Вы можете использовать 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>

Answer 3

Вы должны запретить действие по умолчанию и вместо этого вставить (измененное) содержимое вручную. Страница MDN в событии paste содержит пример (в данном случае ввод текста в верхнем регистре):

// (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>