最近需要给HTML5的WebAPP在页面上实现一个复制功能：用户点击长按文本会全选文字并弹出系统“复制”菜单，用户可以点击“复制”进行复制操作，然后粘贴到AppStore搜索对应的应用。之所以不是采用链接形式直接跳转到AppStore对应应用是为了通过用户的主动输入关键词搜索给推广的企业App增加权重。所以这一个“复制”功能对用户的体验至关重要。
尝试了一些做法，在安卓/iOS平台上的兼容性都不是很好。在微信浏览器内是很容易实现长按文本激发系统菜单，高亮全选文本内容的。但是在其他浏览器的表现就不是很一致了。包括模拟focus input，JavaScript Selection, 使用a标签尝试激活系统菜单。这些方法都存在兼容的缺陷。
1）虽然使用带有href属性的a标签在uc浏览器和百度浏览器上长按文本会出现“自由复制”/“选择文本”菜单，选择该菜单后会出现“全选/复制”的菜单，但是在一些安卓手机的系统浏览器和iPhone中却被视为纯链接，只弹出“复制链接”，没有“复制文本”菜单。况且即使只考虑少部分浏览器可行，这样也给用户操作多了一步，增加了复杂度。所以该方案不可取。
2）借助selection和range的方法需要考虑到不同浏览器的兼容性，代码如下：
| function selectText(element) { var doc = document, text = docgetElementById(element), range, selection; if (docbodycreateTextRange) { range = documentbodycreateTextRange(); rangemoveToElementText(text); rangeselect(); } else if (windowgetSelection) { selection = windowgetSelection(); range = documentcreateRange(); rangeselectNodeContents(text); selectionremoveAllRanges(); selectionaddRange(range); /*if(selectionsetBaseAndExtent){ selectionsetBaseAndExtent(text, 0, text, 1); }*/ }else{ alert("none"); } } |
遗憾的是在iphone Safari上依然无法通过点击或长按高亮选中所有文本（既然也支持window.getSelection，为何在Safari浏览器addRange操作后文本不能默认选中，知道原因的请留言指教）。因此，该方式存在缺陷。主动选中文本区域的方法后面后附上。
3）iPhone用户可能知道，长按某一文本选区内文字周围的空白区域，Safari会自动将该选区内的文本高亮全选（目标文本需要放在独立的div块级容器内）。根据这一特性，用CSS margin修饰一下，利用这个特点，正好可以解决上述第二种方法在ios设备的不兼容。经过测试，无论安卓和ios平台，一般手机自带的系统浏览器都是可以兼容的。至于uc浏览器、百度浏览器等其他厂家的移动端产品，由于有不同的机制，只能使用这些浏览器菜单提供的“自由复制”功能。
