我有一个 div，里面有一个文本。我希望根据字符的位置值以编程方式选择该文本的一部分。
<div id="textdiv">
Hello world. I am a friend.
</div>
我想要选择“llo world”部分(我的意思是突出显示/选择就像在输入/文本区域中选择内容一样)。在这种情况下，位置值是第一个 (3) 和最后一个 (10)。
但是当我尝试在 textarea 中选择一部分文本并在其他 div 中选择相同的文本时，它不会选择相同的文本，它会选择从文本开头到第一个位置值“He”在这种情况下的一部分。
<body>
<div style="display:block;display:inline-block;float:left;border:1px solid green;">
<textarea id="textarea_" style="height:4em;width:200px;">Hello World! I am friend!</textarea>
</div>
<div id="otherdiv" style="border:1px solid black;display:inline-block;height:4em;width:200px;float:left;clear:left;">
Hello World! I am friend!
</div>
<script>
$(function(){
var otherdiv=document.getElementById('otherdiv');
var selectionafter ;
var selectionstart ;
var diff;
var range;
var endNode, startNode;
var textare=$('#textarea_');
var sel = document.getSelection();
textare.on('mousedown', function(event){
textare.on('mousemove', function(event){
selectionafter=event.target.selectionEnd;
selectionstart=event.target.selectionStart;
diff=selectionafter-selectionstart;
if(selectionafter!=0 && selectionstart!=0 && diff!=0){
endNode, startNode = endNode = otherdiv.firstChild;
startNode.nodeValue = startNode.nodeValue.trim();
range = document.createRange();
range.setStart(startNode, selectionstart);
range.setEnd(endNode, selectionafter+1);
sel.removeAllRanges();
sel.addRange(range);
}
});
});
});
</script>
</body>
最佳答案
您不应该在 mousemove 事件处理程序中执行所有这些操作。
这是一个使用 select 事件处理程序的更正版本:
jsFiddle
关于javascript - 通过在 textarea 中选择相同的文本，以编程方式同时选择 div 中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34838746/