通過在textarea中選擇相同的文本以編程方式同時選擇div中的文本

Question

我有一個div，其中有一個文本，我希望根據字符的位置值以編程方式選擇該文本的一部分。

<div id="textdiv">
Hello world. I am a friend.
</div>

我希望選擇“ llo world”部分（我的意思是突出顯示/選擇內容，就像在input / textarea中選擇內容一樣）。 在這種情況下，位置值是前（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>

jsFiddle

Answer 1

您不應該在mousemove事件處理程序中做所有這些事情。

這是使用select事件處理程序的更正版本： jsFiddle

通過在textarea中選擇相同的文本以編程方式同時選擇div中的文本

問題描述

1 個解決方案

解決方案1
0 2016-01-17 13:38:38

通過在textarea中選擇相同的文本以編程方式同時選擇div中的文本

問題描述

1 個解決方案

解決方案1 0 2016-01-17 13:38:38

解決方案1
0 2016-01-17 13:38:38