帶有值window.getSelection（）的jQuery全局變量為空

Question

一個功能中要設置變量就可以在其他功能中使用。 變量的值為window.getSelection()

我做了什么：

1）在div contenteditable選擇一些可編輯的文本

2）點擊class="fa-link" 。 啟動將window.getSelection()值分配給變量global_variable

3）單擊頁面中的其他任何位置，例如id="ahref_name" 。 global_variable值變為空。

為什么global_variable變為空？ 我沒有啟動為global_variable代碼。 因此， global_variable必須保留值...類似於some_test_var 。

將代碼放在這里https://jsfiddle.net/xpvt214o/565926/

這是代碼：

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

試試這個： window.getSelection().getRangeAt(0).cloneContents(); 。 問題是您正在接收一個對象，並且每次選擇DOM的不同部分時都會更新該對象。 通過調用getSelection().getRangeAt(0).cloneContents()您可以將該選擇的副本存儲在變量中。

Answer 2

當您單擊按鈕時，將替換該對象。 因此，不要單擊，而是在選擇上添加mouseup事件並將所選值存儲在全局變量中

  $("#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

您的問題是：

   if (window.getSelection)

也會返回true，因為它會檢查是否存在一個名為“ window.getSelection”的函數（該函數在所有現代瀏覽器中均會執行）。

您應該簡單地致電：

   if (window.getSelection.toString())

僅當選擇為非空時，才報告true。