带有值window.getSelection()的jQuery全局变量为空

时间:2018-08-07 15:47:59

标签: javascript jquery

在一个函数中要设置变量以能够在其他函数中使用。 变量的值为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 );
});

3 个答案:

答案 0 :(得分:3)

尝试以下操作:window.getSelection().getRangeAt(0).cloneContents();。问题是您正在接收一个对象,并且每次选择DOM的不同部分时都会更新该对象。通过调用getSelection().getRangeAt(0).cloneContents(),您会将所选内容的副本存储在变量中。

答案 1 :(得分:1)

当您单击按钮时,对象将被替换。因此,与其单击,不如在选择项上添加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);
});

答案 2 :(得分:1)

您的问题是:

   if (window.getSelection)

还将返回true,因为它会检查是否存在一个名为“ window.getSelection”的函数(在所有现代浏览器中都是如此。

您应该简单地致电:

   if (window.getSelection.toString())

只有选择为非空时,才会报告为真。