Есть ли побочный эффект при использовании addEventListener для обработки события вставки в IE браузере?

Question

Недавно у меня возникла проблема с браузером IE, которую я не могу воспроизвести в своем браузере. Это произошло только на стационарном компьютере (с конкретной версией, я так думаю). Я настраиваю функцию копирования и использую функцию чистой вставки ОС для вставки содержимого. Проблема, которую я выяснил, заключается в том, что когда я добавляю этот код

document.addEventListener("paste", function(e) {
    if (isIE()) {
        window.clipboardData.setData("Text", window.clipboardData.getData("Text").replace(/\r?\n|\r/g, '')); //FOR IE
    }
}); 
///(using to handle the problem of break lines in IE when paste event is triggered)

Иногда, функция вставки ОС не работает должным образом. Иногда это возможно. В него вставлен пустой контент. Однако я отладил, что содержимое clipboardData все еще осталось. Если я удаляю событие addEventListener, все работает хорошо. Но мне нужно сохранить обработку строк разрыва также в IE. Кто-нибудь когда-либо испытывал эту проблему? Пожалуйста, помогите, спасибо.

Answer 1

Наконец, я должен назначить текст входному значению вместо использования чистого события вставки ОС. На данный момент IE11 не очень поддерживает элемент Input.

document.addEventListener("paste", function(e) {
    if (isIE()) {
        e.preventDefault();

        var content = window.clipboardData.getData("text").replace(/\r?\n|\r/g, ''); //FOR IE
        var replace, position = e.target.selectionEnd - e.target.selectionStart;
        // if the position is the end of the string
        if (e.target.selectionStart === $(e.target).val().length)
            replace = $(e.target).val() + content;
        else replace = $(e.target).val().replace($(e.target).val().substr(e.target.selectionStart, position), content);

        $(e.target)
            .val(replace)
            // Manually trigger events if you want
            .trigger('input')
            .trigger('change');
        return false;
    }
});

Answer 2

Пожалуйста, обратитесь к следующему коду, он хорошо работает в браузерах IE11, Edge и Chrome:

<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
<script> 
    var target = document.querySelector('div.target');
    target.addEventListener('paste', function (event) {
        var paste = (event.clipboardData || window.clipboardData).getData('text');
        paste = paste.toUpperCase();
        var selection = window.getSelection();
        if (!selection.rangeCount) return false;
        selection.deleteFromDocument();
        selection.getRangeAt(0).insertNode(document.createTextNode(paste));
        event.preventDefault();
    });
</script>

IE11 Результат: