Sélectionnez une plage dans div divisible

J'ai un div contenteditable et quelques paragraphes en elle.Sélectionnez une plage dans div divisible

Voici mon code:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    </head> 
    <body> 
     <div id="main" contenteditable="true" 
      style="border:solid 1px black; width:300px; height:300px"> 
      <div>Hello world!</div> 
      <div> 
       <br> 
      </div> 
      <div>This is a paragraph</div> 
     </div> 
    </body> 
</html>

En supposant, je veux faire une sélection de plage qui contiendra la chaîne « ! Ce monde est »

Comment faire cela?

Source

2010-09-22 angry kiwi

Une fois que vous avez saisi les nœuds de texte contenant le texte que vous voulez mettre en surbrillance, c'est facile. La façon dont vous les obtenez dépend du générique dont vous avez besoin. Comme il est à l'heure actuelle, avant que l'utilisateur a édité, ce qui suit fonctionnera:

var mainDiv = document.getElementById("main"); 
var startNode = mainDiv.firstChild.firstChild; 
var endNode = mainDiv.childNodes[2].firstChild; 

var range = document.createRange(); 
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world" 
range.setEnd(endNode, 7); // 7 is the length of "this is" 
var sel = window.getSelection(); 
sel.removeAllRanges(); 
sel.addRange(range);

Source

2010-09-22 21:31:40

'removeAllRanges' et' addRange' étaient les morceaux que je manque à ma situation. Merci pour le code! – siannopollo

Sélectionnez une plage dans div divisible

Répondre

Questions connexes