在IE浏览器中使用addEventListener处理粘贴事件有副作用吗?

Is there any side-effect when using addEventListener to handle paste event in IE browser?

最近,我遇到了一个 IE 浏览器无法在我的浏览器上重现的问题。它只发生在固定计算机上(我猜是特定版本)。 我正在自定义复制功能并使用 OS 的纯粘贴功能来粘贴内容。 我发现的问题是当我添加这些代码时

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)

有时候,OS 的粘贴功能不太好用。有时,它可以。它粘贴了空内容。但是,我调试了 clipboardData 内容仍然存在。如果我删除 addEventListener 事件,一切正常。但是,我也需要在 IE 中保留换行符的处理。 有没有人遇到过这个问题?请帮忙,谢谢。

请参考以下代码,在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 结果:

最后,我必须将文本分配给输入值,而不是使用 OS 的纯粘贴事件。 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;
    }
});