Mobile iOS long press copy compatibility scheme ("Steal lazy", change the idea, perhaps the road will pass)

Mobile page, you need to copy a text code.

In iOS, long press the text area, the default selected range, beyond the text area I long pressed,

Put the above picture and the text of the other div below also included in it, not what I want!

As an example:

Such as:

1. The area I long pressed is the area within the red box, and I want to copy the text in the box.

2. The result is that the user experience is too bad, even if it can be manipulated a little bit on iOS and become the copy area I want

3. You have to find a way to make a long press and immediately become a situation

Then, think of the usual in other sites to use the copy of a key, such as the blog Park copy of the Code in the blog:

Check the next page copy function, found that there is a zeroclipboard based on FLASH+JS implementation. Get the phone to test a bit, most of the phone default is not flash, it is not good, and I do not want to use flash related things. pass! Later found what: Document.body.createTextRange (), window.getselection, and then a bunch of compatible code, "blog in this." I really don't have the patience to look at this and write so much code for such a small function. Then a variety of inspection, also did not think of any good way. Then I wondered why the other div content in the same class would be selected after the long press. If I set the z-index of the other div to a different height, wouldn't it be good? Of course, I use this page is absolute positioning, is out of the document flow, a little whimsical. But this is the whimsical, put my thoughts caught in the DOM, an epiphany, I think of a key word: I put other similar div set to not select, the range should not expand it! Then the search found a CSS3 attribute: User-select "Three-party detailed address" then test, pass!   Too easy, add two CSS classes to get it done! All right! Still very happy, although not much of the same. "Lazy" sometimes is really a kind of motivation, to be good at using simple methods to solve problems, see the problem of the solution, you should think of a simpler way. A way of thinking can not get through, do not be too persistent, change a thought may be better. Really feel solved a very simple problem, not very good, are embarrassed to write a blog. However, I am sure that some friends have encountered this problem, share it, and encourage each other. PS: Found in some node cases, the entire parent element is selected. Now I have two pages, iphone6 the test is successful, IPhone5, in which one of the pages will select the parent element, the other page is normal. A little bit silent, the new solution was not thought for the moment.

Mobile iOS long press copy compatibility scheme ("Steal lazy", change the idea, perhaps the road will pass)