以编程方式在文本区域中选择文本并同时在textarea中选择相同的文本

我有一个div，里面有一个文本。我希望根据字符的位置值以编程方式选择一部分文本。我想要选择“llo world”部分（我的意思是突出显示/选择像在输入/文本区域中选择内容一样）。在这种情况下，位置值是第一个（3）和最后一个（10）。以编程方式在文本区域中选择文本并同时在textarea中选择相同的文本

但是，当我尝试在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>

jsFiddle

来源

2016-01-17 cinfis

你不应该做mousemove事件处理中所有的东西。

这里是一个修正版本，作品使用select事件处理程序： jsFiddle

来源

2016-01-17 13:38:38 NicBright

感谢您的答案，但我在textarea的选择文本后，DIV同时想选择文本没有。我怎样才能做到这一点？ – cinfis

以编程方式在文本区域中选择文本并同时在textarea中选择相同的文本

回答

相关问题