在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;
}
});
最近,我遇到了一个 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;
}
});