Disabling text selector in PhoneGap application?

Question

I am detecting the word on long press(touch event) in html document. But on long press I am getting native text selector. I tried to disable user selection through CSS as below but it lead to throw an error.

html {
    -webkit-user-select: none;
}

Error:

Uncaught IndexSizeError: Index or size was negative, or greater than the allowed value.

Code:

    <body onload="init()">    
       <p id="book-content">
            One reason people ......at the time, since then it has made me look down on myself.
      </p>

      <script type="text/javascript">
            var self = this;
            var startTime, endTime;
            var gbMove = false;

            function init() {
                document.getElementById("book-content").addEventListener('touchstart', self.touchstart, false);
                document.getElementById("book-content").addEventListener('touchmove', self.touchmove, false);
                document.getElementById("book-content").addEventListener('touchend', self.touchend, false);
            }

            function touchstart(e) {
                startTime = new Date().getTime();
                gbMove = false;
                console.log('Received Event touchstart');
            }

            function touchmove(e) {
               // gbMove = true;
                console.log('Received Event touchmove');
            }

            function touchend(e) {
                endTime = new Date().getTime();
                if (!gbMove && (endTime - startTime) / 1000 > 1) {
                    s = window.getSelection();
                    var range = s.getRangeAt(0);
                    var node = s.anchorNode;
                    while (range.toString().indexOf(' ') != 0) {
                        range.setStart(node, (range.startOffset - 1));
                    }
                    range.setStart(node, range.startOffset + 1);
                    do {
                        range.setEnd(node, range.endOffset + 1);

                    } while (range.toString().indexOf(' ') == -1 && range.toString().trim() != '' && range.endOffset < node.length);
                    var str = range.toString().trim();
                    alert(str);
                }

            }
    </script>
    </body>

Hi, this error is not because your fix. Refer [link1](http://stackoverflow.com/questions/21097739/javascript-changing-image-color-indexsizeerror-index-or-size-is-negative-or-gre) and [link2](https://github.com/maroslaw/rainyday.js/issues/86) — byJeevan, Jul 02 '14 at 16:34
So why i am getting the error at this line:--- var range = s.getRangeAt(0); — Sandeep vashisth, Jul 03 '14 at 03:24

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

This problem is easy to prevent. Always check rangeCount before calling getRangeAt:

function touchend(e) {
...
   if (s && s.rangeCount > 0) {
     var range = s.getRangeAt(0);
...
}

Please refer - same problem solved here in this post. Fiddle here http://jsfiddle.net/stXDu/

edited May 23 '17 at 12:05

Community

1
1

answered Jul 03 '14 at 04:22

byJeevan

3,728
3
37
60

all the time i am getting rangeCount as 0.so the required code won't execute. – Sandeep vashisth Jul 03 '14 at 04:41
[this](http://stackoverflow.com/questions/22935320/uncaught-indexsizeerror-failed-to-execute-getrangeat-on-selection-0-is-not) post didn't helped ? – byJeevan Jul 03 '14 at 04:45
Not actually the post is only to disable the above error. but i want to detect the word touched on(touch hold). so if i add the s.rangeCount condition further code will not execute. and the error is coming only if i add style -webkit-user-select:none. if i remove this style property code is working fine. but i need to disable text-selection in android. is there any alternative in javascript or css – Sandeep vashisth Jul 03 '14 at 05:02

Disabling text selector in PhoneGap application?

1 Answers1