带有值window.getSelection（）的jQuery全局变量为空

Question

In one function want to set variable to be able to use in other functions. Value of the variable is window.getSelection()

What i did:

1) selected some text inside div contenteditable

2) clicked on class="fa-link" . Starts code that assigns value of window.getSelection() to variable global_variable

3) click anywhere else in page, for example in id="ahref_name" . Value of global_variable becomes empty.

Why global_variable becomes empty? I did not started code that gives value to global_variable . So global_variable must keep value... like some_test_var .

Placed code here https://jsfiddle.net/xpvt214o/565926/

And here is the code:

Html

<div contenteditable>To select something</div>

<button class="fa-link">fa-link</button>

<div id="contenteditable_menu_ahref" style="display:none" >
    <input type="text" id="ahref_name" placeholder="Ahref name" />
</div>

jQuery

var global_variable = '';
var some_test_var = '';

$(document).on('click', '.fa-link', function(){

    console.log ('fa-link clicked');

    $("#contenteditable_menu_ahref").css("display", "block");

    if (window.getSelection) {

        global_variable = window.getSelection();
        console.log( 'global_variable 01 ' + global_variable );

        some_test_var = 'some test var';

        $("#ahref_name").val(global_variable);

    } 

});



$(document).click(function() {
    console.log( "global_variable 02 " + global_variable + ' / some_test_var ' + some_test_var );
});

Answer 1

Try this: window.getSelection().getRangeAt(0).cloneContents(); . The issue is that you are receiving an object and that object is updated every time you select a different part of the DOM. By calling getSelection().getRangeAt(0).cloneContents() you'll store a copy of that selection in you variable.

Answer 2

The object is replaced when you click on the button. So instead of click, add a mouseup event on selection and store the selected value in the global variable

  $("#contenteditable_menu_ahref").mouseup( function(){
           if (window.getSelection) {

               global_variable = window.getSelection();
           }

    });

$(document).on('click', '.fa-link', function(){

    console.log ('fa-link clicked',global_variable);
});

Answer 3

Your problem is that:

   if (window.getSelection)

will also return true because it check that a function called 'window.getSelection' exists (which it does in all modern browsers.

You should simply call:

   if (window.getSelection.toString())

That will only report true if selection is non-empty.