3

Our app is based on HTML and running inside Android webview, so basically it is a mobile web page running on a Chrome app.

As the following image shows, users can long tap to start a text selection and drag the blue cursor to change the selection range.

enter image description here

Whenever user stops drag the cursor, our app will do a range check to make sure the user didn't select into the part we don't want them to. If user did select into some part that not allowed to, we will change the selection range programmatically, as the code showing below: enter image description here

More specifically, we will change the range after certain element. The problem is, once we programmatically changed the selection range, the blue cursor disappear. But, we want user is able to drag the blue cursor to change the selection after we "adjust" the scope of the selection.

So, my question is: How to show selection cursor after change the range of selection programmatically?

PS: 1.We can not use user-selection:none method. 2.If you have any other approach, please share with us.

Erwin Huang
  • 71
  • 1
  • I think you should wrap the **hidden part** in a `span` and give it a style property of `user-select: none; `. So that the user can't select the specific text. –  Mar 05 '20 at 08:00
  • Also,https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting check out this question for more details: –  Mar 05 '20 at 08:01
  • @ProttayRudra Thanks for your concern, we cannot use user-select in this case for some reason. – Erwin Huang Mar 05 '20 at 08:04
  • Then maybe check out this question, its solution is on javascript: https://stackoverflow.com/questions/16805684/javascript-disable-text-select –  Mar 05 '20 at 08:05
  • 1
    Please don't post screenshot of code but the actual code. You can include formatted code blocks in your posts and even running code snippets for javascript-css-html. – Kaiido Mar 05 '20 at 08:08

0 Answers0