如何使用JavaScript清除Mobile Safari中的文本选择？

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)