Prevent double tap from selecting text

Question

I have made a jQuery mobile widget which has a minus button on the left and a plus button on the right and a div in the middle with a number which gets updated after either the plus or minus buttons is pushed. It's essentially just a "quantity" selector.

The problem is that when either button is pressed too frequently (if you wanted to add a couple of items quickly) then it selects other text on the page, as in the screenshot.

Can anyone think of a way of preventing this?

check out: http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css — user3154108, Oct 05 '16 at 09:54

ReaperSoon · Answer 1 · 2016-10-05T10:02:05.690

2

You have to prevent text selection in your buttons :

Here is a cross-compatible CSS class

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

And add this class to all your element you want to not be selectable.

edited Oct 05 '16 at 10:02

answered Oct 05 '16 at 09:53

ReaperSoon

605
5
20

Thanks @Steve Cohen, but I marked the other answer as correct because it provided a link to the source. – Brad Oct 05 '16 at 11:14
Hmm ok, I will remember to provide the source for the next time – ReaperSoon Oct 05 '16 at 12:26

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

It seems what you are looking for is user-select

For more information you can also check this answer: How to disable text selection highlighting using CSS?

edited May 23 '17 at 12:33

Community

1
1

answered Oct 05 '16 at 09:55

Neikos

1,574
1
19
32

Prevent double tap from selecting text

2 Answers2