如何在文本突出显示时聚焦于文本框
如何在文本突出显示时聚焦于文本框
提问于 2018-08-18 03:39:06
我想设置一个笔记UI，用户可以在其中输入笔记，同时查看他们突出显示的要做笔记的内容。
我有一个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)，文本区域将获得焦点，但文本将变为未突出显示，文本区域将失去焦点，但文本将保持突出显示。
解决方案
在我的备注菜单弹出功能中，我创建了一个span，并在其中添加了一个类：
var $span = $('<span>').addClass('blueHighlight').append(range.extractContents());
range.insertNode($span[0]);当备注菜单消失时，我调用一个函数来删除span类：
$('#pages').find('.blueHighlight').each(function(){
$(this)[0].outerHTML = $(this).text();
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-18 05:49:06
您可以使用自定义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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51901910
复制相关文章
相似问题