Is there a way selecting MULTIPLE areas of text with JS in Chrome and/or IE?

Firefox 3 can select MULTIPLE areas of text with JS. Is there a way doing this in Chrome and IE?

I really tried to find a way to select of multiple textareas in a web page in Chrome and IE9.


Infos at: http://help.dottoro.com/ljxsqnoi.php


Example at: http://jsfiddle.net/t3sWz/


Code FireFox3.5+ only... (but this is the question):

<html>

<head>
    <meta charset="UTF-8">
    <style>
        #trigger { background: yellow }
    </style>
</head>

<body>
    <p id="test">
        This is some text you can highlight by dragging or clicking below.
    </p>
    <span id="trigger">
        Click here to select "This" and "some"
    </span>
    <a> - Firefox only :-(</a>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="button" value="Get selection" onmousedown="getSelText()">
    <form name=aform>
        <textarea name="selectedtext" rows="5" cols="20">
        </textarea>
    </form>
    <script>
        var testCase = function() {
            var userSelection;

            if (window.getSelection) {
                userSelection = window.getSelection();
            } // No support for IE
            var textNode = document.getElementById('test').firstChild;
            var theRange = document.createRange();

            // select 0th–4th character
            theRange.setStart(textNode, 0);
            theRange.setEnd(textNode, 4);

            // set user selection    
            userSelection.addRange(theRange);

            var textNode = document.getElementById('test').firstChild;
            var theRange = document.createRange();

            // select 8th–12th character
            theRange.setStart(textNode, 8);
            theRange.setEnd(textNode, 12);

            // set user selection    
            userSelection.addRange(theRange);
        };

        window.onload = function() {
            var el = document.getElementById('trigger');
            el.onclick = testCase;
        };

        function getSelText() {
            var txt = '';
            if (window.getSelection) {
                txt = window.getSelection();
            } else if (document.getSelection) {
                txt = document.getSelection();
            } else if (document.selection) {
                txt = document.selection.createRange().text;
            } else
            return;
            document.aform.selectedtext.value = txt;
        }
    </script>
</body>

Answers:

Answer

No. Of the major browsers, only Firefox supports multiple ranges within the user selection. Other browsers (WebKit, Opera, IE9) do have the Selection API to support multiple ranges but do not currently support it. WebKit is apparently not planning to add support any time soon. As to Opera and IE, I have no idea.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.