This article is reproduced in: Ape 2048 Website ➜ https://www.mk2048.com/blog/blog.php?id=hk1aiciibb
0x0. Effect
First on renderings:
0x1. Causes
APP has been a presentation module, which is part of the built-in front-end development of Web pages, access the client support and micro letter, which has a feature called scribe notes, that is, after a long press text, text on a selected mark, which is the background.
In the first iteration demand, the product of the scribe notes function raises questions, such as why iOS and Android style is not uniform (with a native system of long press to select), is not to achieve click, you can select the text , it is not a custom style, is not to reverse the election ......
Hearing this my heart is so
The principle of friendly coexistence with the product, I immediately said that some demand is great, I need to seriously think about how to refuse .
0x2. Analysis
Of course, the idea of the idea of return, to do or to find a way to do
Demand for products from the point of view, only simulate a long press to select a system at this stage in order to meet product demand and possible future potential. If you simulate a long press on, so probably need to address several issues:
- Need to disable the system long press to select text
- You need to get to the exact location of clicks character
- You need to be able to simulate a rectangular background when selected
0x3. Realization
Just for analysis, probably can be achieved:
First, add user-select: nonethe style, so that the system can disable the text selection; a second point can be directly or indirectly acquired character position dom API, probably only indirectly byRange.getClientRects()
Third, initially conceived two schemes, a label is directly inserted in the text, this is bound to alter the structure of the entire dom, influence subsequent mark, then the second solution, adding a direct svg layer, by svg rectangle and polygon draw
Finally, specific implementation see https://github.com/luojilab/easy-marker , we have put out this open source program
This program has the following advantages:
- Custom Select style
- Click to select the current sentence
- Press to select the current sentence
- Reverse Select Forward
- Highlight marks selected text
- ......
There is little need partners welcomed the star, iusse, pr go together.
Article first appeared in Luo Ji thinking know almost front-end column , welcome attention.