关键的CSS代码:
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; }
说明:这里的margin:2em正是为了实现Safari浏览器上的长按全选功能,为了尊重还原设计稿效果,父容器.cparea又使用了负边距来抵消这个2em的外边距。最终,不仅视觉上和设计图保持了一致,也实现了长按全选激发系统菜单。
最后再补充一下支持Safari下的完整方法:
$("#kwd").bind("taphold", function(){ var doc = document, text = docgetElementById("kwd"), range, selection; if (docbodycreateTextRange) { //IE range = documentbodycreateTextRange(); rangemoveToElementText(text); rangeselect(); } else if (windowgetSelection) { //FF CH SF selection = windowgetSelection(); range = documentcreateRange(); rangeselectNodeContents(text); selectionremoveAllRanges(); selectionaddRange(range); //测试 consolelog(texttextContent); textinnerText && consolelog(textinnerText); //FireFox不支持innerText consolelog(texttextContentlength); textinnerText && consolelog(textinnerTextlength); //在Chrome下长度比IE/FF下多1 consolelog(textfirstChildtextContentlength); textinnerText && consolelog(textfirstChildinnerTextlength); consolelog(textfirstChildinnerHTMLlength); //注意IE9-不支持textContent makeSelection(0, textfirstChildtextContentlength, 0, textfirstChild); /* if(selectionsetBaseAndExtent){ selectionselectAllChildren(text); selectionsetBaseAndExtent(text, 0, text, 4); } */ }else{ alert("浏览器不支持长按复制功能"); } }); function makeSelection(start, end, child, parent) { var range = documentcreateRange(); //consolelog(parentchildNodes[child]); rangesetStart(parentchildNodes[child], start); rangesetEnd(parentchildNodes[child], end); var sel = windowgetSelection(); selremoveAllRanges(); seladdRange(range); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。