Question

我有一个令人满意的div，并希望在用户点击span时获得用户的选择。

我的问题是，当我点击span时，选择会被取消选中，因此window.getSelection().toString()会返回''。

如何才能让这个点击 span？

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

我的代码：

＆＃13;

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

＆＃13;

#btn {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

Answer 1

当你的contenteditable div上有一个点击时，你可以存储选择，然后当你点击按钮时返回它。

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/

Answer 2

由于没有任何活动，您可以使用专门检测“选择”的事件。或者＆＃39;取消选择＆＃39;，您必须收听mouseup事件并填充＆＃34;缓存变量＆＃34;可以将选择存储在内存中：

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);
});

window.getSelection（）for contenteditable div * on click *

2 个答案: