Control text selection behavior in iOS Mobile Safa

问题:

I have a long HTML document that contains multiple paragraphs. When I try to select the text either in Mobile Safari on iOS or in a UIWebView, the following happens:

1. At first, I get character-level precision on my selection.
2. Then, as I select more, the precision drops to two lines of text and eventually to whole paragraphs. There is no way to end my text selection exactly where I want.

When I set the CSS contentEditable property to true, I retain the character-level precision, but the keyboard also shows up, which of course I don't want.

Is there any way to retain the character-level selection precision no matter how long the text is that I am selecting?

回答1:

iOS 8's WKWebView might be able to solve this problem. WKWebViewConfiguration has a property called selectionGranularity. The comment reads:

The level of granularity with which the user can interactively select content in the web view. Possible values are described in WKSelectionGranularity. The default value is WKSelectionGranularityDynamic.

One of the two possible values is WKSelectionGranularityCharacter. The comment says:

Selection endpoints can be placed at any character boundary.

I have not tried it yet, but it sounds very promising!

Update 7/6/15: It looks like it's not that easy: Text Selection in WKWebView: WKSelectionGranularityCharacter

Update 7/10/15: When you closely investigate the iOS Kindle app, you can see that they have re-implemented "native" text selection in JavaScript because they couldn't make native text selection behave the way they wanted to. I'm pretty sure they must have tried everything else before they decided to re-implement it.

回答2:

I meet the same problem,

I solve this by a line of CSS:

display: inline-block;

Both works on Safari and the WebView.

回答3:

Since you are also selecting the title of the text, the browser recognize it as a complete text and select the whole paragraph. By the way there is no way to help you without seeing the HTML source code !

回答4:

Hey you can use CSS property for not letting user to select text. You can use like:

html
{
   user-select:none;
}