排版紧凑情况下IOS 浏览器的文字部分选中问题

一、需求

一个每一项都是图文混排的列表页,在需要对其中的某一部分文字进行选中copy的时候,IOS个二货每次都是直接选中了整个列表项,无论怎么操作它的选框都没有办法做到部分选中。

这是我本周遇到遇到的最奇葩的问题,没有之一。

二、思路

仔细思考并试验之后,找到了三个解决方案:
(一)放开页面的缩放限制,在用户把页面放大的情况下,文字选中会相对容易很多;
(二)把需要选中的文字放进input[text],然后用oninput屏蔽掉input的输入;
(三)分析html/css研究下ios为啥总是傻傻分不清楚,只能整块整块的选中;

方案一,因为页面是在webview中展现,允许缩放会和native的整体风格不协调,并且对用户来说,交互门槛略高,选中效果也不是很理想,直接pass掉;
方案二,完美实现长按选中,部分复制。but,会不可避免的弹出系统的输入法,产品经理以体验太差直接毙掉,无奈,继续研究方案三。

变换html结构、css定位,由简到繁各种对照...过程之波折略掉一千字。

三、总结

ios的长按选择功能,是有bug的。
在html节点太密集或者有元素浮动或者文本节点间距/行高太小的时候,长按出来的选框容易把这一坨都选上,而其中的细节它傻傻分不清楚;
so:
1.外层容器与文本节点以及文本节点之间,间距或行高适当增大(以手指轻触屏幕时的压屏范围为参照,14px差不多了);
2.外层父容器设置-webkit-user-select:text;其他无关子节点设置-webkit-user-select:none;
3.避免使用浮动;
4.外层容器避免设置行高,尤其是无单位数字取值的行高,如line-height:1;
5.避免多层嵌套;
6.容器多用绝对定位;
7.使用table布局,可以保持清晰的html结构,帮助ios识别;
8.如果是列表项,listbox设置overflow:hidden;
9.非需要选中部分尽量不要设置line-height;

结尾放一张成功之后的效果图:

 .

原文地址:https://www.cnblogs.com/youryida/p/4730994.html