How to remove highlighted text on Framework7 mobile web app when touch/tap on other elements?

Question

For some reason, when I highlight text in the mobile web version of a Framework7 app and touch on other places I expect the highlight to be gone... it's being retained. However, on desktop web, when I highlight text and click somewhere else, the highlight is gone.

How can I make the mobile web behave like the desktop web when highlighting a text?

I tried to preventDefault on touchstart hoping it would prevent the default retention or events... but it could be something else I'm missing/not getting because with or without preventDefault it's still the same issue.

$('.content').on('touchstart', function(e) {
   e.preventDefault();
});

Thanks a lot!

do you have any more details, or an example you can post? it would be helpful to know what browser, what device, and what kind of web page/application you're working with. — worc, Oct 11 '16 at 23:02
I reported it in Framework7 with video, however it was in low priority so I decided to put it in StackOverflow as a general question to see if I can do anything to fix it https://github.com/nolimits4web/Framework7/issues/1157#issuecomment-251639996 — Woppi, Oct 12 '16 at 10:16

darrylyeo · Accepted Answer · 2016-10-17T20:19:40.867

1

To clear all selections upon touchstart:

$(window).on('touchstart', function(){
    window.getSelection().removeAllRanges()
})

Edit: To only clear the selection if tapped outside of the current highlight, check to make sure the touch position doesn't fall in any selection client rects:

$(window).on('touchstart', function(e){
    var selection = window.getSelection();
    var tappedOnSelection = selection.rangeCount && Array.from(selection.getRangeAt(0).getClientRects()).some(function(rect){
        return e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top  && e.clientY <= rect.bottom;
    });
    if(!tappedOnSelection){
        selection.removeAllRanges();
    }
})
$(window).on('touchend', function(e){
    e.preventDefault();
})

edited Oct 17 '16 at 20:19

answered Oct 12 '16 at 01:04

darrylyeo

3,103
20
30

Hello @darrylyeo thank you so much this one works however when I highlight a text and tap on it... the highlight is also gone... is there a condition where I can say, if the highlighted text is the one tapped, do not remove the highlight? :) – Woppi Oct 17 '16 at 11:36
your updated answer''s effect is the same as the old answer... when I tap the highlighted text it is being removed. I'm giving the bounty as you were able to solve one of the issues and it is expiring.... i have yet to figure out the issue of disappearing when tapped :p Thanks. – Woppi Oct 18 '16 at 03:15
1

I finally was able to solve it, the issue was with Array.from as the project I'm working on is using ES5 and the e.client... posted my answer below. – Woppi Oct 18 '16 at 06:13

Woppi · Answer 2 · 2016-10-18T06:33:16.780

Had to modify the best answer I accepted above since the project I'm on is using ES5 (Array.from is not working) and also I had to replace e.clientX with e.touches[0].clientX, sames goes for e.clientY.

This is what worked for me.

$(window).on('touchstart', function(e){
    var selection = window.getSelection();
    var tappedOnSelection = false;

    if(selection.rangeCount) {
        var args = [].slice.call(selection.getRangeAt(0).getClientRects());

        tappedOnSelection = args.some(function(rect){
            var top = e.touches[0].clientY;
            var left = e.touches[0].clientX;

            return left >= rect.left && left <= rect.right && top >= rect.top  && top <= rect.bottom;
        });
    }


    if(!tappedOnSelection){
        selection.removeAllRanges();
    }
});

$(window).on('touchend', function(e){
    e.preventDefault();
});

NOTE: Tested on an android device

How to remove highlighted text on Framework7 mobile web app when touch/tap on other elements?

2 Answers2