0

So I want the user to be able to select individual words via a taphold event. The selection ability of the user is important for the downstream application (I later use window.getSelection so I do not want to fully disable the users selection ability). However, whenever the user engages in a taphold event, while the resulting application functions correctly, the mobile safari ui results in highlighting the entire paragraph of text which is highly undesirable. This is the specific behavior I want to avoid.

So far I have tried the following

  1. preventDefault on both taphold event and touchstart. Issue is that on touchstart this then disables scrolling. preventDefault on the taphold does not seem to clearly do anything
  2. Changing css in accordance w/ this. This prevented user selection in general which was not desirable.
  3. Variations of the two above, including parent touchstart events with internal taphold events which then trigger parent preventDefault. Using stopPropogation on the touchstart event. Trying different specifications of the css. Especially -webkit-tap-highlight-color: transparent; which appears to do nothing.

I am admittedly a novice with working with js and css so I may be approaching this the wrong way. Ideally if someone knows how to prevent this behavior on ios, that is ideal. Otherwise, I am open to alternative solutions to text selection rather than taphold. The current direction I am thinking if unable to solve this issue is to implement some form of doubletap selection on mobile, though I am still unsure how to get the exact text without window.getSelection. Any help is appreciated, thank you.

ajlidz
  • 1
  • 1

1 Answers1

0

There were two changes I made to resolve this issue. The first is that I changed how the modal was being handled. Instead of toggling the display in the css, I change the opacity and z-index. The second is that, in the js code after getting the desired selection but before toggling the modal, I close the window selection and toggle the background text to be unselectable via the suggestion linked in the above question. These in tandem appear to have resolved my issue.

ajlidz
  • 1
  • 1