将带有新行的文本复制到 <input type="text"/> 在 IE 中不起作用

Question

我的问题如下：

我有一个输入，就这么简单：

<input type="text"/>

当我尝试粘贴一些包含新行的文本时，新行之后的所有文本都没有出现。

现在我知道这种类型的输入不应该支持这种行为，最好的方案是使用 textarea 但这在我目前正在进行的项目中很难实现。

但是，其他浏览器会将新行转换为 space 字符并在新行之后附加文本，这样您最终可以在一行中获得整个文本。 IE 不会那样做。

我找到了以下 solution to intercept paste event，我想也许我可以用它来将字符串转换为单行字符串，但它在 firefox 中不起作用。我可以尝试浏览器检测，但恐怕它在许多其他情况下也会失败。

我还能做些什么来使 IE 的行为与其他浏览器一样吗？我最好的选择是什么？

Answer 1

我发现这个答案可能是您问题的解决方案： JavaScript get clipboard data on paste event (Cross browser)

它应该适用于 IE6+、FF 22+、Chrome 和 Safari。

HTML

<input id='editableDiv' contenteditable='true' type="text"/>

JavaScript

function handlePaste (e) {
    var clipboardData, pastedData;

    // Stop data actually being pasted into input field
    e.stopPropagation();
    e.preventDefault();

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');

    // Remove new line characters
    alert(pastedData);
    var res = pastedData.replace(/\r?\n|\r/g, );
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

希望这对朋友有帮助。

Answer 2

感谢您的回答 George K - 您的回答是我解决方案的基础。我还有一些问题需要解决：

addEventListener 给我 'element not found'
连接值未填充字段

所以我最终对你的 javascript 进行了这些细微的修改：

function handlePaste(e) {
    var clipboardData, pastedData;

    // Stop data actually being pasted into input field
    e.stopPropagation();
    e.preventDefault();

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');

    // Remove new line characters
    var res = pastedData.replace(/\r?\n|\r/g, ' ');
    document.getElementById(e.target.id).value = res; // <- added this to populate value
}

// added this also - this fixed my 'element not found' error
window.addEventListener('load', function () {
    document.getElementById('editableDiv').addEventListener('paste', handlePaste);
})

顺便说一句，我使用的是 <asp:textbox> 而不是 <input> 元素。这在 IE (11) 和 Chrome (83.x) 中对我都有效。

将带有新行的文本复制到 <input type="text"/> 在 IE 中不起作用

Copying text with a new line to <input type="text"/> not working in IE

html

internet-explorer

copy-paste

html-input

HTML

JavaScript