如何克服多重选择问题

时间:2016-04-23 22:38:43

标签: javascript jquery

我在p tag中有一个示例段落文字。如果我在段落中选择一些文字。我正在将其文本颜色从黑色更改为绿色并将其包装在span tag中,添加为其选择的类。但我可以选择已经选择的文本。我不希望再次选择所选文本。

我在链接中提供了示例代码:http://jsfiddle.net/2w35p/81/



function getSelectedText() {
  t = (document.all) ? document.selection.createRange().text : document.getSelection();

  return t;
}

$('body').mouseup(function() {
  var selection = getSelectedText();
  var selection_text = selection.toString();
  var span = document.createElement('SPAN');
  span.textContent = selection_text;
  span.className = "selectedText"
  var range = selection.getRangeAt(0);
  range.deleteContents();
  range.insertNode(span);
});

span {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged..
  <p>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:2)

在mousedown上,检查现有的selectedText元素,并将其替换为其文本节点:

$('body').mousedown(function() {
  var selected = document.querySelector('.selectedText');
  if(selected && selected.childNodes.length) {
    selected.parentNode.replaceChild(selected.childNodes[0], selected);
  }
});

要防止浏览器的默认选择行为出现问题,请将此代码添加到mouseup()功能的末尾:

if(window.getSelection().empty) {
  window.getSelection().empty();
} else if(window.getSelection().removeAllRanges) {
  window.getSelection().removeAllRanges();
}

<强>段

&#13;
&#13;
function getSelectedText() {
  t = (document.all) ? document.selection.createRange().text : document.getSelection();

  return t;
}

$('body').mousedown(function() {
  var selected = document.querySelector('.selectedText');
  if(selected && selected.childNodes.length) {
    selected.parentNode.replaceChild(selected.childNodes[0], selected);
  }
});

$('body').mouseup(function(){
  var selection = getSelectedText();
  var selection_text = selection.toString();

  var span = document.createElement('SPAN');
  span.textContent = selection_text;
  span.className = "selectedText"
  var range = selection.getRangeAt(0);
  range.deleteContents();
  range.insertNode(span);

  if(window.getSelection().empty) {
    window.getSelection().empty();
  } else if(window.getSelection().removeAllRanges) {
    window.getSelection().removeAllRanges();
  }
});
&#13;
html, body {
  height: 100%;
}

span {
  color: red;  /* changed to red for demo purposes */
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.. 
<p>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

简而言之,您只需在范围内添加事件触发器或触发器即可控制应如何进行选择。如果选择在范围内结束,您没有指定会发生什么,但我相信您可以找出该部分。

var span = document.createElement('SPAN');
span.textContent = selection_text;
span.className = "selectedText";
span.onselectstart = ()=> !!window.getSelection().empty(); //new
span.onmouseover = ()=> !!window.getSelection().empty(); //new
if (selection_text) { //new
  var range = selection.getRangeAt(0);
  range.deleteContents();
  range.insertNode(span);
} //new

答案 2 :(得分:1)

当你结束或输入时,触发mouseup事件的可能反转。 检查是否有span标记返回false。

答案 3 :(得分:1)

//如何在所选文本周围添加范围?

当然不是动态的。只需使用字符串......

var selection_text = '<span class="selectedText">'+selection.toString()+'</span>';