2017-08-14 8 views
0

私は実際にユーザー選択を作成しようとしています。 Here is the plunkerなぜユーザーの選択が画面に表示されるのですか?

<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> 

すべてが正常に動作しているように見えますが、コンソールに期待される出力が得られますが、テキストは画面上で選択されません。それは設計によるのですか?

答えて

1

あなたは範囲を見つけましたが、今度はブラウザに選択させる必要があります。例:

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

ありがとう、それは欠けていたビットでした。私は現在選択されている範囲を 'removeAllRanges'で削除しようとしましたが、それがなければ動作しません。なぜなのかご存知ですか? [このplunker](https://plnkr.co/edit/Ce0VcDZVwzHJguegZoyu?p=preview)を参照してください - 画面上で何かを選択して3秒待ってください –

+0

ブラウザは一般的に複数の選択範囲をサポートしているとは思えません。範囲](http://help.dottoro.com/ljcpcpnt.php)を参照してください)。代わりに、既存の選択範囲を取得して変更することができます。範囲を取得するには、 'var range = sel.getRangeAt(0);'を使います。 – AntPhitlok

+0

'Range'オブジェクトのこの[参考文献](https://developer.mozilla.org/en-US/docs/Web/API/Range)は、範囲を拡張/変更するのに役立ちますし、' removeAllRanges ) 'と' addRange() 'を実行して結果の選択を行います。 – AntPhitlok

関連する問題