关键的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);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
有关HTML5页面在iPhoneX适配问题这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下
html5中canvas图表实现柱状图的示例本篇文章主要介绍了html5中canvas图表实现柱状图的示例,本文使用canvas来实现一个图表,小编觉得挺不错的,现在分享
Adobe Html5 Extension开发初体验图文教程Adobe公司出品的多媒体处理软件产品线较多,涵盖了音视频编辑、图像处理、平面设计、影视后期等领域。这篇文章主
基于HTML5的WebGL经典3D虚拟机房漫游动画这篇文章主要介绍了基于HTML5的WebGL经典3D虚拟机房漫游动画,需要的朋友可以参考下
html5实现移动端适配完美写法这篇文章主要介绍了html5实现移动端适配完美写法,需要的朋友可以参考下
HTML5响应式(自适应)网页设计的实现本篇文章主要介绍了HTML5响应式(自适应)网页设计的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考