How to clear text selection in Mobile Safari with JavaScript?

Question

Is there a way to programmatically clear a selection box in Mobile Safari? I tried window.getSelection().removeAllRanges() as suggested by the answers to another Stack Overflow question, Clear Text Selection with JavaScript, and while the Selection object is reset to no selection (type is "None", isCollapsed is true, rangeCount is 0, and the anchorNode/focusNode/baseNode/extentNode are null), the selection box remains on screen:

I also tried window.getSelection().collapse(), but that did not work.

I am testing iOS 7.1 Simulator as well as Mobile Safari on an iPad running iOS 7.1.1.

Answer 1

This has been a known bug in Mobile Safari since 2010! http://www.openradar.me/8707236

The year is now 2018 and this is still a bug. (iOS 10.2.2)

In areas where it was not needed, removing event.preventDefault() helped.

Answer 2

I was having the exact same problem and in my case what made a difference was removing

event.preventDefault();

from the handler of the "deselection" tap event.

Answer 3

One possibility is to quickly add and remove the user-select CSS class of the parent element, to disable and enable the user selection.

For example,

parent = getSelection().anchorNode.parentNode
parent.style.userSelect = "none"
setTimeout(()=>parent.style.userSelect = <default>, 100)