2017-08-14 3 views
0

J'essaie de créer de manière pragmatique la sélection de l'utilisateur. Here is the plunker. Voici la configuration simple:Pourquoi la sélection de l'utilisateur est rendue à l'écran?

<p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p> 
<ol> 
    <li>Take responsibility not just for your own words, but for the 
     comments you allow on your blog.</li> 
    <li>Label your tolerance level for abusive comments.</li> 
    <li>Consider eliminating anonymous comments.</li> 
</ol> 

<script> 
    var range = document.createRange(); 
    var startPar = document.querySelector('p').firstChild; 
    var endLi = document.querySelector('li:nth-child(2)').firstChild; 
    range.setStart(startPar,13); 
    range.setEnd(endLi,17); 
    console.log(range.toString()); 
</script> 

Tout semble fonctionner très bien, je reçois le résultat attendu à la console, mais le texte n'est pas sélectionné sur l'écran. Est-ce par conception?

Répondre

1

Vous avez trouvé la plage, mais vous devez maintenant indiquer au navigateur de la sélectionner. Exemple:

var sel = window.getSelection(); 
sel.removeAllRanges(); 
sel.addRange(range); 
+0

merci, c'était le peu qui manquait. J'ai essayé de ne pas supprimer la gamme actuellement sélectionnée par 'removeAllRanges', cela ne fonctionne pas sans cela. Est-ce que tu sais pourquoi? voir [ce plunker] (https://plnkr.co/edit/Ce0VcDZVwzHJguegZoyu?p=preview) - sélectionner quelque chose sur l'écran et attendre 3 secondes –

+0

Je ne pense pas que les navigateurs supportent généralement plusieurs plages de sélection (voir [description de multiple gammes] (http://help.dottoro.com/ljcpcpnt.php)). Au lieu de cela, vous pouvez obtenir la plage de sélection existante et la modifier. Pour obtenir la plage, utilisez 'var range = sel.getRangeAt (0);'. – AntPhitlok

+0

Cette [référence] (https://developer.mozilla.org/en-US/docs/Web/API/Range) pour l'objet 'Range' peut vous aider à étendre/modifier votre plage et vous pouvez utiliser' removeAllRanges () 'et' addRange() 'à nouveau pour faire la sélection résultante. – AntPhitlok