Question

I’ve seen many answers here in Stack Overflow explaining how we can remove the formatting of a text paste by listening to keydown events and redirecting the focus to a textarea positioned outside the screen. This solution is good but don’t tackle the problem of pasting using the context menu or browser menu.

Google Plus does use a contenteditable div as an editor to user posts, and the paste there does work properly even with the context menu. Does anyone has any idea of how they achieved this good result?

Answer 1

I made some tests and I think I was able to reproduce the behaviour. I’ve only tested this solution using Google Chrome and Firefox, so it might have issues in many browsers. I suspect Google Plus gracefully degrade the user experience when it can’t use this technique.

To implement this feature, I redirected the focus to a div outside the screen during the paste event. The div received the paste content, and after a timeout, I get the text of the div (using jquery to remove the html tags). Sample code:

var object = this;     
this.$editable.on("paste", function(evt) {
    object.saveCursorPosition();
    var textarea= $("<div contenteditable></div>");
    textarea.css("position",  "absolute").css("left", "-1000px").css("top", object.$editable.offset().top + "px").attr("id","pasteHelper").appendTo("body");
    textarea.html('<BR>');
    textarea.focus();

    setTimeout(function() {
        object.$editable.focus();
        object.restoreCursorPosition();
        object.insertTextAtCursor(textarea.text());
        textarea.remove();
    }, 0);


});