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

Question

我想设置一个注释UI，用户可以在其中输入注释的同时查看他们突出显示的内容以进行注释。

我有一个id为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>