Selected Text Editing

October 09, 2022 Post a Comment

I am a iPhone app developer.I am changing the color of selected text. This is working fine for me. But when there are few repeated words for example Hi All.Hello world.I am iPhon

Solution 1:

If you're just colouring the text, then Stefan's answer is the most reliable and easiest way:

document.execCommand("ForeColor", false, "#0000FF");

However, it looks as though you're adding a class and a click handler, so you need more flexibility.

First, there is no way to get a selection as offsets within an HTML representation of the DOM reliably. You can get the selection as offsets within nodes directly via anchorOffset, anchorNode, focusOffset and focusNode, or as a DOM range. If the selection is completely contained within a single text node, you can use the range's surroundContents() method:

Demo: http://jsfiddle.net/UvBTq/

Code:

function highlightText(data) {
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
        var range = selection.getRangeAt(0);
        var selectedText = range.toString();

        var span = document.createElement("span");
        span.id = "span_" + range.startOffset + "_" + range.endOffset;
        span.className = "highlightedText";
        span.onclick = function() {
            myOnclikFunction(selectedText);
        };

        range.surroundContents(span);

        // Restore selection
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

However, this is very brittle and will only work when the selection is completely contained within a single text node. Depending on what you're trying to do, you may need a more flexible solution.

Solution 2:

To get the selected text, you have to use the getSelection javascript method. i don't know if that method is available on iphone browser, but here is a general function that combines the methods for all browsers.

Baca Juga

function getSelected() {
    var text = "";
    if (window.getSelection
    && window.getSelection().toString()
    && $(window.getSelection()).attr('type') != "Caret") {
        text = window.getSelection();
        return text;
    }
    else if (document.getSelection
    && document.getSelection().toString()
    && $(document.getSelection()).attr('type') != "Caret") {
        text = document.getSelection();
        return text;
    }
    else {
        var selection = document.selection && document.selection.createRange();

        if (!(typeof selection === "undefined")
        && selection.text
        && selection.text.toString()) {
            text = selection.text;
            return text;
        }
    }

    return false;
}

found here

Solution 3:

Use contenteditable="true" and document.execCommand('ForeColor', false, 'YOURCOLOR'); instead

Example:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>- jsFiddle demo</title>

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
    <script type='text/javascript'>
        $(function () {
            $('#color').click(function () {
                document.execCommand('ForeColor', false, '0000FF');
            });
        });
    </script>
</head>
<body>
    <p contenteditable="true">Hello world</p>
    <button id="color">Change Color</button>
</body>
</html>

Fiddler: http://jsfiddle.net/WQKCw/1/

Html5 Info

Selected Text Editing

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Selected Text Editing"