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

Question

My problem is the following:

I have an input, simple as that:

<input type="text"/>

And when I try to paste some text that contains a new line in it, all the text after the new line does not appear.

Now I know this type of input shouldn't support such behavior, and the best scenario is to use a textarea but that would be hardly achievable in the current project I am working on.

However, other browsers convert the new line to a space character and append the text after the new line so you eventually get the whole text in a single line. IE doesn't do that.

I have found the following solution to intercept paste event and I thought maybe I can use it to transform the string into a single-lined but it doesn't work in firefox. I can try a browser detection but I am afraid it can fail in many other scenarios as well.

Is there something else that I can do to make IE behave like other browsers and what are my best options?

Answer 1

I found this answer that might be the solution to your problem: JavaScript get clipboard data on paste event (Cross browser)

It should work in 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);

Hope this helps mate.