window.getSelection() for contenteditable div *点击*

Question

我有一个 contenteditable div 并希望在用户单击 span 时获得用户的选择。

我的问题是，当我单击 span 时，选择未被选中，因此 window.getSelection().toString() returns ''.

我怎样才能让这个 在 span 的点击 上工作？

我知道 getSelection() 的实际效果，因为如果我将 window.getSelection().toString() 包装在 5 秒的 setTimeout 中，5 秒后，我会得到选定的文本！

我的代码：

$('#btn').click(function() {
  console.log(window.getSelection().toString()); //returns ''
});

#btn {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='btn'>get selection</span>
<br><br>
<div id='ce' contenteditable='true'>test</div>

Answer 1

由于没有可用于专门检测 'select' 或 'deselect' 的事件，因此您必须监听 mouseup 事件并填充 "cache variable" 可以将选择存储在内存中：

var selection = '';
document.getElementById('ce').onmouseup = function(){
  selection = window.getSelection().toString();
};

document.getElementById('btn').onclick = function(){
  console.log(selection);
};

或者，如果你有 jQuery，你可以试试这个更令人抱怨的版本，它也会影响基于键盘的选择：

var selection = '', shifted = false;
$('#ce').on('mouseup keyup keydown', function(e){
  if (e.type === 'keydown') {
    shifted = e.shiftKey;
    return;
  }

  if (
    e.type === 'mouseup' ||
    (shifted && (e.keyCode === 39 || 37 || 38 || 40))
  ){
    selection = window.getSelection().toString();
  }
});

$('#btn').on('click', function(){
  console.log(selection);
});

Answer 2

您可以在单击 contenteditable div 时存储选择，然后在单击按钮时 return 它。

document.querySelector("#ce").addEventListener(function(){
  userSelection= window.getSelection().toString();
});


document.querySelector("#btn").addEventListener("mouseup",function(){

  document.querySelector("#selection").innerHTML= 
    "You have selected:<br/><span class='selection'>" +  userSelection +"</span>";

});

http://jsfiddle.net/xnvp38u3/