Blur element, then send focus back to original caret location

specifically with IE9

[csdude55]

This has gotten way more complicated than I'd intended.

When someone has copied HTML to their clipboard, I want to surround it with a class of my own before inserting it. That doesn't seem so hard, now, does it? LOL

In Chrome and FF, it's easy peasy, but it turns out that IE9 is a freakin' pain. The only way I can find to make it work is to move the focus to a hidden contenteditable element (in this example, id="clipboard-contenteditable"), paste it there, then set the whole thing back to a variable, modify the variable, then paste that variable back to the original location (id="original-contenteditable").

I've just about gotten it working, except for one problem... when I focus on the hidden element and then focus back to the original, it sends the caret back to the beginning instead of remembering where it's supposed to be.

This is where I am... any thoughts on how to make the caret go back to its original location?

// using jQuery 3.3.1
var source = $('#original-contenteditable');
var clipboard = $('#clipboard-contenteditable');
var a;

source.on('beforepaste', function(e) {
 if (window.clipboardData) {
  e.preventDefault ? e.preventDefault() : e.returnValue = false;
  clipboard.focus();

// no clue what these next 7 lines do... I saw them elsewhere, but it works the 
// same with or without them
  var range = document.createRange();
   range.selectNodeContents(clipboard.get(0));

  var sel = window.getSelection();
   sel.removeAllRanges();
   sel.addRange(range);

  var getRange = sel.getRangeAt(0);
   getRange.collapse(false);
////////

  // not sure why, but if it's not delayed a little then it doesn't work
  setTimeout(function() {
   a = clipboard.html();

   // manipulate data
   a = editClip(a);

   // this is where the problem is, it focuses back to the top of the element
   // instead of where the caret originally was
   source.focus();

   document.selection.createRange().pasteHTML(a);
   return;
  }, 30);
 }
})

// This works fine with Chrome, FF, and Android browser
.on('paste', function(e) {
 if (e.originalEvent.clipboardData) {
  e.preventDefault ? e.preventDefault() : e.returnValue = false;

  a = (e.originalEvent || e).clipboardData.getData('text/html');

  // manipulate data
  a = editClip(a);

  document.execCommand('insertText', false, a);
  return;
 }
});

[Dimitri]

IE9 is a freakin' pain

IE9 is the worse in the IE / Edge family. Lot of things are working with IE 7 and 8, and broken in IE 9, and work again in IE10 and above (Edge). I abandoned the idea of trying to support IE9

[csdude55]

Luckily for me, my traffic seems to be upgrading... as of last month, only 6.79% of my traffic was IE, and 9.03% of that was IE9 :-)

But as far as I can tell, IE11 is no better with this particular issue. It looks like most people just use:

window.clipboardData.getData('Text');

but that strips all HTML from the paste, which doesn't really work for me at all. At the very least, I need to keep the HTML when they paste something from the same site.