移动HTML5页面新闻兼容的文本高亮选择解决方案

最近，需要HTML5的webapp实现复制页面：按用户点击会弹出选择文本和文本系统；复制；菜单，用户可以点击复制；；复制，然后粘贴到AppStore搜索相应的应用程序。相反的联系直接到相应的应用商店，它是增加用户量通过关键词搜索活动的输入到扩展的企业应用程序，所以这一复制的功能是用户体验的关键。

一些做法也试了试，与Android和iOS平台的兼容性不是很好，在微信浏览器很容易根据刺激系统菜单实现长文本，选择高亮显示的文本，但在其他浏览器上表现不是很一致，包括模拟的重点投入，Javaｓｃｒｉｐｔ的选择，使用一个标签来启动系统菜单。这些方法都兼容的缺陷。

1）虽然标签与UC浏览器和百度浏览器文本href属性的使用会出现长按； / 免费；选择文本菜单，选择该菜单后将出现选择/复制；但在系统菜单，iPhone浏览器和Android手机有一些被视为一个纯链接，弹出的链接；复制；没有，复制的文本菜单。另外，即使只有几个浏览器被认为是可行的，这也给用户的操作步骤，增加了复杂性。因此该方案是不可取的。


2）选择和范围的使用需要考虑到不同浏览器的兼容性。代码如下：


功能selecttext（元）{
文档，
文本= docgetelementbyid（元），
范围，
选择；

如果（docbodycreatetextrange）{
documentbodycreatetextrange范围=（）；
RangemoveToElementText（文本）；
Rangeselect（）；
如果（windowgetselection）{ }
选择= windowgetselection（）；
documentcreaterange范围=（）；
rangeselectnodecontents（文本）；
SelectionremoveAllRanges（）；
SelectionaddRange（范围）；
/ *如果（selectionsetbaseandextent）{
SelectionsetBaseAndExtent（文本，文本，0，1）；
}
其他{ }
警报（否）；
}
}


不幸的是，在iPhone Safari中，所有文本仍然不能通过单击或高亮选择。（因为它也支持window.getselection，为什么不可以是针对文本的Safari浏览器操作，选择后，请注意了解原因）。因此，这种方法也有缺陷，文本区域的主动选择方法连接后。

3）iPhone用户可能知道，按空白区域周围的文本区域内的文本，Safari会自动选择文本的大小了（目标文本应放在单独的容器div块级）。根据这一特点，CSS保证金改为利用这一特点来解决iOS设备上面的第二种方法是不相容的。经过测试，Android和iOS平台，一般手机系统的浏览器兼容。至于UC浏览器、百度浏览器和其他厂商的移动终端产品，由于不同的机制，我们只能使用这些浏览器菜单提供复制，和自由。

所以，我综合的第二和第三的方式，复制菜单使用jQuery的移动taphold事件对刺激手机longtap操作系统的模拟，所以基本上可以不可以按文本区域突出显示选定的文本在浏览器中的所有移动设备。此外，taphold的bug不兼容有一个详细的解决方案在这里。如果您的项目需要完善，您可以自己搜索解决方案。

下面是我的解决方案的列表，具体代码如下：

HTML代码：




1，它必须第一次下载才能生效。
2，不能从列表中下载


三王国手机大师优化大师


*按下框，复制关键字

去AppStore搜索和下载



Javaｓｃｒｉｐｔ代码：



$（#第纳尔）绑定（taphold ），功能（{ / /不支持iPhone / iTouch / iPad的Safari
文档，
文本= docgetelementbyid（该），
范围，
选择；
如果（docbodycreatetextrange）{
documentbodycreatetextrange范围=（）；
RangemoveToElementText（文本）；
Rangeselect（）；
如果（windowgetselection）{ }
选择= windowgetselection（）；
documentcreaterange范围=（）；
rangeselectnodecontents（文本）；
SelectionremoveAllRanges（）；
SelectionaddRange（范围）；
其他{ }
警报（浏览器不支持长拷贝函数）；
}
}）；





密钥CSS代码：

cparea {
文本对齐：中心；
字体：微软雅黑；
保证金：- 2em 00；
}
该{
显示：内联块；
颜色：# 272727；
背景颜色：# FFF；
字体大小：1875em；
字体大小：1875em；
填料：75em 1em；
边境：1px冲# e60012；
WebKit的用户选择：元；
保证金：2em；
}
该跨{
显示块；
边境：1px solid # FFF；
}
KDEs {
显示：内联块；
颜色：# 212121；
字体大小：875em；
填料顶部：0；
}
KDEs B {
颜色：# ed5353；
字体大小：25em；
填充右：1em；
}



注：此保证金：2em是实现Safari浏览器上长按选择的特点，为了尊重设计效果的降低，父容器。Cparea也用负利润来抵消2em以外。最后，不仅视觉设计和一致性，也实现了长按菜单选择励磁系统。

最后，添加一个完整的方法来支持Safari。


$（#第纳尔）。Bind（taphold
文档，
文本= docgetelementbyid（该），
范围，
选择；
如果（docbodycreatetextrange）{ / /伊江
documentbodycreatetextrange范围=（）；
RangemoveToElementText（文本）；
Rangeselect（）；

} else if（windowgetselection）{ / / FF CH SF
选择= windowgetselection（）；
documentcreaterange范围=（）；
rangeselectnodecontents（文本）；
SelectionremoveAllRanges（）；
SelectionaddRange（范围）；

测试
consolelog（texttextcontent）；
textinnertext consolelog（textinnertext）； / / Firefox不支持InnerText
consolelog（texttextcontentlength）；
textinnertext consolelog（textinnertextlength）； / / /铬的长度比IE FF 1
consolelog（textfirstchildtextcontentlength）；
textinnertext consolelog（textfirstchildinnertextlength）；
consolelog（textfirstchildinnerhtmllength）；

/ /注意，IE9的-不支持的内容
makeselection（0，0，textfirstchildtextcontentlength，textfirstchild）；
*
如果（selectionsetbaseandextent）{
SelectionselectAllChildren（文本）；
SelectionsetBaseAndExtent（文本，文本，0，4）；
}
* /
其他{ }
警报（浏览器不支持长拷贝函数）；
}

}）；
功能makeselection（开始、结束、孩子、父母）{
变量范围= documentcreaterange（）；
/ / consolelog（parentchildnodes {孩子}）；
RangesetStart（parentchildnodes {孩子}，开始）；
RangesetEnd（parentchildnodes {孩子}，结束）；

VaR的SEL = windowgetselection（）；
SelremoveAllRanges（）；
SeladdRange（范围）；
}



以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。