Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery

Selected Text Editing

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) {
        varrange = 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.

functiongetSelected() {
    var text = "";
    if (window.getSelection
    && window.getSelection().toString()
    && $(window.getSelection()).attr('type') != "Caret") {
        text = window.getSelection();
        return text;
    }
    elseif (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;
        }
    }

    returnfalse;
}

found here

Solution 3:

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

Example:

<!DOCTYPE html><html><head><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><title>- jsFiddle demo</title><scripttype='text/javascript'src='http://code.jquery.com/jquery-1.8.2.js'></script><scripttype='text/javascript'>
        $(function () {
            $('#color').click(function () {
                document.execCommand('ForeColor', false, '0000FF');
            });
        });
    </script></head><body><pcontenteditable="true">Hello world</p><buttonid="color">Change Color</button></body></html>

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

Post a Comment for "Selected Text Editing"