Android WebView Javascript getSelection

Question

I am having some trouble getting the selection from a WebView in Android.

I can get the WebView to go into selection mode. I can even get it to copy the text to the ClipBoard. But what I really want to do is highlight the selection permanently.

So the idea is put the WebView in select mode. Let the user select the text, and then fire something to highlight that text. I can get it to work by getting the selected text from the clipboard, and then search for it in Javascript and highlight it. The problem occurs when the user selects a real common word. I have to either highlight them all or somehow figure out where the selection is to get the right one.

I have tried this JavaScript which works on the iPhone. Bu getSelection() does not seem to work on the Android.

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
            // Non-IE case
        sel = window.getSelection();
        if (sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
            // Use HiliteColor since some browsers apply BackColor to the whole block
        if ( !document.execCommand("HiliteColor", false, colour) ) {
            document.execCommand("BackColor", false, colour);
        }
        document.designMode = "off";
    } else if (document.selection && document.selection.createRange) {
            // IE case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

Any suggestions?

Thermotaxis

How do you get it to copy the text to the ClipBoard? Do you do this programmatically, or do you count on the user to do the selection manually. – Hollywood

Answer 1

When the WebView goes into "Selection Mode", the WebView is not actually being used for selection... It is being pushed under a "WebTextView" (private class in Android's arsenal) which mimics the text position, yet allows images to show through, and allows you to "select" the text which appears in the actual HTML. The problem comes when you try to interact with the WebView after "selecting" the text. The highlight and cursor handles are in the right position, but they are actually in the special WebTextView I mentioned, therefore you do not actually have a selection to get via JavaScript's getSelection, or any other means in JavaScript. I am working on making the ACTION_DOWN (of the LongPress) which triggers selection and the drag and ACTION_UP of the release from drag work for me via JavaScript, but it is very hairy, and not at all user friendly at this point...

http://www.java2s.com/Open-Source/Android/android-core/platform-frameworks-base/android/webkit/WebTextView.java.htm

check the source(that's a lot of work to mimic text selection instead of provide it) It is sad, and currently very painful for a project our team has undertaken -- especially after doing the same app for iPad...

Sydel

Any progress on this? How do you get an instance of the WebTextView for the selection? – Ewaewald

You can't. It's a shell to provide the text that lives in the WebView, but not access to the WebView itself... #6948947 I used Java to capture motion during a selection process and JavaScript to enable selection within the WebView itself. – Sydel

Dan please send me some code i need the id and tagname of selected word in webview – Arminius

Answer 2

Finally, in Android 4.4 KitKat, the WebView is now based on Chromium.

Therefore we have access to window.getSelection()!!

wv.evaluateJavascript("console.log(window.getSelection().baseNode.nodeValue);", null);

Tested on Nexus 5 & Nexus 7.

Firebug

If using evaluateJavascript why not to utilize return value from ValueCallback? evaluateJavascript("(function(){return window.getSelection().baseNode.nodeValue})()", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Log.v(TAG, "SELECTION:" + value); } }); } – Gratiana

Have you tried this on Android 19+? It doesn't work for me at all. – Destine

@AngelKjoseski same – Ruffo

Answer 3

You should try rangy - A cross-browser JavaScript range and selection library.

Bufflehead

@Dainel the same way as you use it on any other platform - rangy is just a set of JavaScript files. – Bufflehead

in android getSelection() is not returning anything so is it possible be rangy?? – Arminius