IE11 pasting clipboard data to an input element annoyance

Question

I had some javascript that basically listened for the "paste" event on a particular input text element. I did this event binding via jQuery. Now, in previous versions of IE, things worked great.

But after upgrading to IE11, the behavior is different.

Scenario: I'm copying and pasting multiple keywords separated by a CR and LF (multiple rows in a spreadsheet). In javascript, within the "paste" event handler, I read the clipboard data and convert all the CR/LF characters into a single comma, THEN i set this converted data string back to the clipboard. Again, this worked great in previous versions of IE.

The behavior in IE11 is as follows: Upon pasting, the "paste" event handler does get called and everything that I mentioned does happen. Unfortunately, the pasted result in the input element is still not formatted correctly. Subsequent pasting does show the correct comma-delimited string (because the last thing i do in the handler is set the converted string to the clipboard).

Question: Am i handling this paste event handler incorrectly? Again, I'm handling the paste event, converting the clipboard data, then setting the converted data back to the clipboard. In previous IE versions this worked upon first paste. But in IE11 the converted data string is pasted on any paste event AFTER the 1st paste.

Here is the function:

 $("input").bind("paste", function (e) {
       // for multi rows of spreadsheet data.
       // format so that new line & carriage return are converted into a comma.
       var rawText = window.clipboardData.getData("text");
       var delimitedText = rawText.replace(/\r\n/g, ', ');
       window.clipboardData.setData("text", delimitedText); // this is why subsequent pasting works fine.
});

Much appreciated.

Answer 1

I resolved this, by finding similar questions from other posts. The solution was the using a setTimeout, with a timeout of 100 ms. Setting this way makes it work like a charm.