Question

我想设置一个笔记UI，用户可以在其中输入笔记的同时查看突出显示的笔记。

我有一个带有id注释的元素，它会在可以键入注释的文本区域消失。

我的代码

//on mouse up this function is called            
function note(){
  var sel = window.getSelection();
  var range = sel.getRangeAt(0);
  editor = { "startContainer": range.startContainer, "startOffset": range.startOffset, "endContainer": range.endContainer, "endOffset": range.endOffset };     //saves position of highlighted text
  range.setStart(editor.startContainer, editor.startOffset);
  range.setEnd(editor.endContainer, editor.endOffset);
  if (sel != '') {
    //notes element pops up
    $('#note').focus();
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

在没有 removeAllRanges（）和 addRange（range）的情况下，文本区域获得了焦点，但文本变得不突出显示，因此文本区域失去了焦点，但文本保持突出显示

解决方案

在笔记菜单弹出功能中，我创建了一个跨度并向其中添加了一个类：

var $span = $('<span>').addClass('blueHighlight').append(range.extractContents());
range.insertNode($span[0]);

我调用一个在笔记菜单消失时删除span类的函数：

$('#pages').find('.blueHighlight').each(function(){
     $(this)[0].outerHTML = $(this).text();
});

Answer 1

您可以使用自定义的highlighted类，并在选中该类时用span包围所选文本。

演示：

// Get the selected text's range

function getSelectedTextRange() {
  var selection = window.getSelection();
  if (selection.rangeCount > 0) {
    var range = selection.getRangeAt(0);
    var rangeContents = range.cloneContents();
    if (rangeContents.childNodes.length > 0 && rangeContents.childNodes[0].nodeType === Node.TEXT_NODE) {
      return range;
    }
  }
  return null;
}

$('#text')
   // On click release, surround highlighted text with a span with highlighted class
  .on('mouseup', function() {
    if (range = getSelectedTextRange()) {
      var $span = $('<span>').addClass('highlighted').append(range.extractContents());
      range.insertNode($span[0]);
      $('#note').focus();
    }
  })
  // On click down, remove all previously highlighted text
  .on('mousedown', function() {
    $(this).find('span').each(function() {
      $(this)[0].outerHTML = $(this).text();
    });
  });

#text::selection,
.highlighted {
  color: red;
  background: yellow;
}

#text::-moz-selection,
.highlighted {
  color: red;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Highlight me!</div>
<textarea id="note" placeholder="Notes"></textarea>

突出显示文本时如何聚焦于文本框

解决方案

1 个答案: