How can i backup selected text on an element when the blur event occurs?

Question

I try to backup a TextRange object in JavaScript to restore it later, so to do this i've tried to link a function to the blur event but when the function is called my selection is already lost :/ How can i run specific behaviour BEFORE the blur event ? Or have you an other solution to do this trick ?

I've tried this :

this._editableFrame._elt.onload= function(oEvent){
    oEvent.srcElement.contentDocument.body.onblur=function(oEvent) {
    this._sel=this.document.selection.createRange().duplicate(); } 
    /*alert(this._sel.text);*/
    return true; 
};

And when i do this i just have an empty TextRange :/ but if i write an "alert" in the function i succeed to get my text selection in the blur function :/ How can i capture the blur event and what can i do with this type of manipulations ? I'm a beginner in javascript.

Thanks a lot, i spent a lot of time on this problem... :/

Can you show us what have you tried? BTW you can always update some `global` variable with actual selection so you will need to capture blur event — antyrat, Jul 06 '12 at 13:26
I've tried this : `this._editableFrame._elt.onload= function(oEvent){ oEvent.srcElement.contentDocument.body.onblur=function(oEvent) { this._sel=this.document.selection.createRange().duplicate(); } /* alert(this._sel.text);*/ return true; };` And when i do this i just have an empty TextRange :/ but if i write an "alert" in the function i succeed to get my text selection in the blur function :/ How can i capture the blur event and what can i do with this type of manipulations ? I'm a beginner in javascript. — BlackMario, Jul 06 '12 at 13:52
please edit your question to include your code; don't post it as a comment as it's more difficult to read and less likely to be seen. — jackwanders, Jul 06 '12 at 13:52

score 1 · Accepted Answer · answered Jul 06 '12 at 13:45

I think blur event is not perfect, this may help you

var selectedText = "";
function getSelectedText()
{
    if (typeof window.getSelection != "undefined") {
        selectedText = window.getSelection().toString();
    }
    else if (typeof document.selection != "undefined" && document.selection.type == "Text")
    {
        selectedText = document.selection.createRange().text;
    }
}

function show_selected_text()
{
     getSelectedText();
    if(selectedText) alert(selectedText);
}

document.onmouseup = show_selected_text;
document.onkeyup = show_selected_text;

DEMO.

Thanks for your reply, with this i succeed to implement one temporary solution to do the trick and i can continue my work :) — BlackMario, Jul 06 '12 at 15:06

score 1 · Answer 2 · edited May 23 '17 at 11:56

Since you seem to be talking about IE only, I suggest you use the IE-only beforedeactivate event. The blur event is too late and your selection is gone by the time it fires.

this._editableFrame._elt.onload = function(oEvent){
    oEvent.srcElement.contentDocument.body.onbeforedeactivate=function(oEvent) {
        this._sel=this.document.selection.createRange().duplicate();
    };
};

Here's an answer of mine to a similar question:

https://stackoverflow.com/a/5338889/96100

How can i backup selected text on an element when the blur event occurs?

2 Answers2