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

我想建立一个NotesUI，用户可以在其中键入笔记，同时查看他们突出显示的要记笔记的内容

我有一个id为note的元素，它会在文本区域中淡出，在文本区域中可以键入注释

我的代码

//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），textarea将获得焦点，但文本将不高亮显示，同时textarea将失去焦点，但文本将保持高亮显示

解决方案 在“我的笔记”菜单弹出式函数中，我创建了一个范围并向其中添加了一个类：

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

---

您可以使用一个自定义的

高亮显示的
类，并在选中该类时用
span
围绕选定文本

演示：


//获取所选文本的范围
函数getSelectedTextRange（）{
var selection=window.getSelection（）；
如果（selection.rangeCount>0）{
var range=selection.getRangeAt（0）；
var rangeContents=range.cloneContents（）；
if（rangeContents.childNodes.length>0&&rangeContents.childNodes[0]。节点类型===Node.TEXT\u节点）{
返回范围；
}
}
返回null；
}
$（“#文本”）
//单击“释放”后，用带高亮显示类的跨距环绕高亮显示的文本
.on（'mouseup'，function（）{
如果（范围=getSelectedTextRange（））{
var$span=$（''）.addClass（'highlighted'）.append（range.extractContents（））；
range.insertNode（$span[0]）；
$（'#note'）.focus（）；
}
})
//单击“下一步”，删除所有以前高亮显示的文本
.on（'mousedown'，function（）{
$（this）.find（'span'）.each（function（）{
$（this）[0].outerHTML=$（this.text（）；
});
});
#文本：：选择，
.突出显示{
颜色：红色；
背景：黄色；
}
#文本：：-moz选择，
.突出显示{
颜色：红色；
背景：黄色；
}

突出我！
因此，基本上是在文本区域中选择了一些文本，然后您想同时键入一些内容？是的。我希望用户在为突出显示的文本键入注释时仍能看到突出显示的文本。按gmail的方式操作，它看起来像一个文本区域，但输入将从您键入的位置开始，这将很棘手，但这可能是solnThanks！这真的帮了我大忙！
$('#pages').find('.blueHighlight').each(function(){
     $(this)[0].outerHTML = $(this).text();
});