咱们搞个移动端的高亮全选文字功能，就是为了让大家能轻松复制文本。这样一来，不管是在网上冲浪还是聊天打字，都能省心不少！比如说，有时候你想把网页上的一段话搜一下或者转发给朋友，没有这个功能就得干瞪眼了。
这个功能的难点就是吃透各种浏览器和操作系统之间的差异性。举个例子，也许你发现有些浏览器，长按文字照样可以“复制链接”，而不是“复制文本”，这时候就得工程师想办法让这个功能适应最多种类的情况了。
使用a标签的局限性
虽然有的手机用UC或者是百度浏览器就能通过带href属性的a标签实现“自由复制”或者“选择文本”功能，但是在某些安卓手机自带的浏览器和iPhone里，这个方法就只能当作普通链接来处理了，只会出现“复制链接”的提示，而没有“复制文本”的选项。
不仅如此，这个办法用在iPhone的Safari浏览器里还不行！就算有window.getSelection可以用，但其实操作完之后还是选不中默认的文字。这就说明，只靠特定HTML标签的方法有时候并不好用。
利用selection和range方法的挑战
实际上，尽管通过selection和range的方式来控制文字选取挺好的，但要注意在实践中，不同浏览器之间可能会有兼容性的问题！拿iPhone的Safari来说，这个方法选字就没那么稳妥。
这个不一样，使得开发者要做很多测试和调来保证脸儿对脸儿都行得通。这样一来，开发者就得多花点心思，开始操心了。
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");
}
}
利用CSS和jQuery的解决方案
面对这些麻烦，个好办法就是用CSS和jQuery来实现长按复制功能！比如，你可以通过调节CSS的margin属性来改变字体大小，再用jQuerymobile里的taphold事件来模拟长按效果。
这个办法好就好在啥都能用，无论是手机还是电脑，各种各样的浏览器也都能搞定。比如说我们常用的安卓和iOS系统里的自带浏览器，还有UC浏览器、百度浏览器什么的。有了它们，才能真正解决全选高亮文字的难题。
实现细节与注意事项
要弄好这个，有点小技巧的哦～比如，为了在Safari上有个长按全选的功能，把外边距设成2em就行了；当然，为了保持画面的美感，父容器的外边距可以用负值抵消掉这个顶上去的距离。
别忘了要优化代码，让它跑得更快更稳！可以试试少搞些没意义的DOM操作，把事件处理也捋顺溜光。
测试与优化
搞定了功能之后，别忘了多做点测试！这就是看看这个功能在各种设备、浏览器上能用不，稳不稳定；还有用户用着顺不顺畅。这样就能发现和消除可能出现的毛病，让你们用得更开心。
看，优化得不停歇！因为浏览器和设备更新换代，代码可得适时调整、优化，才能适应新的大环境~所以，开发者们得多关注新技术、新潮流，提升自个儿的本领才行。
用户反馈与持续改进
1、必须首次下载才生效
2、不能从排行榜下载哦
三国艳义手机优化大师
★长按虚线框,拷贝关键词
去AppStore搜索下载
参考用户意见改版功能很关键！根据他们反馈，才能了解到真实用起来怎么样，有哪些需求和不满意的地方。这样能方便咱们更明白他们，然后有的放矢地改正不足。
做下去不只有修老问题这么简单，还要加功能进一步满足用户追求新鲜感的需求！这可是个让开发人员天天操心的动态过程。
$("#kwd")bind("taphold", function(){ //不支持iPhone/iTouch/iPad Safari
var doc = document,
text = docgetElementById("kwd"),
range,
selection;
if (docbodycreateTextRange) {
range = documentbodycreateTextRange();
rangemoveToElementText(text);
rangeselect();
} else if (windowgetSelection) {
selection = windowgetSelection();
range = documentcreateRange();
rangeselectNodeContents(text);
selectionremoveAllRanges();
selectionaddRange(range);
}else{
alert("浏览器不支持长按复制功能");
}
});
总结与展望
说白了，搞定手机里的文字全选功能可不是小菜一碟，需要懂得各种编程技术和方法。比如用HTML、CSS、JavaScript还有jQuery这些东西，就能解决兼容性和操作性的难题，让你用得更舒心。
未来，科技越来越牛，用户们也变得挑剔，这个行业还有好多地方可以进步！咱们这些开发者们得一直保持学习和创新，技术得时时刻刻提高，才能跟上这个瞬息万变的时代。
cparea{
text-align: center;
font-family: Microsoft Yahei;
margin: -2em 0 0;
}
kwd{
display: inline-block;
color: #272727;
background-color: #fff;
font-size: 1875em;
font-size: 1875em;
padding: 75em 1em;
border: 1px dashed #e60012;
-webkit-user-select:element;
margin: 2em;
}
kwd span{
display: block;
border: 1px solid #fff;
}
kdes{
display: inline-block;
color: #212121;
font-size: 875em;
padding-top: 0;
}
kdes b{
color: #ed5353;
font-size: 25em;
padding-right: 1em;
}
读者互动
大家在做移动端开发时，有没有碰到过批量选中文本的情况？你们都是怎么搞定的呀？快来分享下你们的小技巧，大家一起来互相学习。
评论0