Programmatically select text in UIWebView

I'm asking this question after 2 days of research. I've read all the related questions and answers in stackoverflow and google (including this question, which is very similar but without an answer) and still couldn't find a solution. Hopefully someone here will be able to help.

I have a UIWebView with some text loaded into it. I want to select part of the text programmatically, as if the user long-pressed on it.

I've tried executing this javascript code as a response to a click:

function selectEl(x,y)
    document.designMode = "on";
    var el = document.elementFromPoint(x, y);
    var range = document.createRange();
    var sel = document.getSelection();
    document.designMode = "off";

I've tried it with and without changing designMode to "off" at the end of the function. I know this code "selects" the correct element, because if I perform this command

document.execCommand("BackColor", false, "#ffffcc");

it actually highlights the element I clicked on, but it doesn't cause a selection of the text. Any ideas on how to achieve this?



This seems to be a bug in Mobile Safari. When I toggle contentEditable to true in touchstart and set it to false in touchend it works. If I remove those lines and refresh it still works. If I close Mobile Safari, clear the cache, and then re-open the document with the lines removed it stops working again.

I've updated the code below with a working version (although I removed the long-press for simplicity).

<!DOCTYPE html>
<script type="text/javascript">

(function() {
    var node,

    document.addEventListener("DOMContentLoaded", function() {
        document.body.addEventListener("touchstart", function(event) {
            var selection = window.getSelection();

            clientX = event.touches[0].clientX;
            clientY = event.touches[0].clientY;

            range = document.caretRangeFromPoint(clientX, clientY);
            node = range.startContainer;
            offset = range.startOffset;

            document.body.contentEditable = "true";
        document.body.addEventListener("touchmove", function(event) {
            var selection = window.getSelection(),
                range = document.caretRangeFromPoint(event.touches[0].clientX, event.touches[0].clientY),
                newRange = document.createRange();

            if(clientY < event.touches[0].clientY) {
                newRange.setStart(node, offset);
                newRange.setEnd(range.startContainer, range.startOffset);
            else {
                newRange.setStart(range.startContainer, range.startOffset);
                newRange.setEnd(node, offset);


        document.body.addEventListener("touchend", function(event) {
            document.body.contentEditable = "false";
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus volutpat mauris sed porta. Phasellus euismod malesuada eleifend. Donec mattis, orci quis scelerisque mattis, turpis sem pulvinar nisi, et sagittis nunc nisi sed nulla. Pellentesque pharetra consequat neque, ultrices mattis mauris auctor id. Aenean tincidunt turpis non odio gravida semper. Praesent feugiat, lorem at lacinia tristique, orci eros tincidunt leo, at adipiscing sapien felis at tellus. Phasellus ac est nec nibh posuere euismod vel vitae neque. Vestibulum mollis adipiscing urna ut tristique. Vivamus purus tortor, venenatis id aliquam nec, elementum et lacus. Praesent elementum purus eget sapien ornare laoreet. Vestibulum ac odio enim.

Just a thought: Make sure you are NOT using anything like this in your css:

* {
  -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;

This prevents any text selections.


I came across this: = "highlight"; = "highlighttext";

Or, THIS SITE Has written some HORRIBLE scripting but it may help you :) It works with ranges.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.