详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案

最近需要给HT ML 5的WebAPP在页面上实现一个复制功能：用户点击长按文本会全选文字并弹出系统[复制]菜单，用户可以点击[复制]进行复制操作，然后粘贴到 AppStore 搜索对应的应用。之所以不是采用链接形式直接跳转到App Store 对应应用是为了通过用户的主动输入关键词搜索给 推广 的企业App增加权重。所以这一个[复制]功能对用户的体验至关 重要 。

尝试了一些做法，在 安卓 /iOS平台上的兼容性都不是很好。在微信浏览器内是很容易实现长按文本激发系统菜单，高亮全选文本内容的。但是在其他浏览器的表现就不是很一致了。包括模拟focus input，JavaScript Selection, 使用a标签尝试激活系统菜单。这些方法都存在兼容的缺陷。

1）虽然使用带有 hr ef属性的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 m arg in修饰一下， 利用 这个特点，正好可以解决上述第二种方法在ios设备的不兼容。经过测试，无论安卓和ios平台，一般手机 自带 的系统浏览器都是可以兼容的。至于uc浏览器、百度浏览器等其他厂家的移动端产品，由于有不同的机制，只能使用这些浏览器菜单提供的[自由复制]功能。

所以，我综合了第二种和第三种方式，使用 jq uery mobile 中的taphold事件来模拟longtap操作激发手机系统的复制菜单，这样基本上可以 做到 在所有移动设备浏览器上都能实现长按文本区域来高亮选中所有文本内容。再提一句，taphold的兼容bug这里就不详细附解决方法了，如果你的项目要求精益求精，你可以自行搜索解决方案。

下面列出我的解决方案。具体代码如下：

HTML代码：

<div class=" para requirement">  
    <div class="tips tips -t ">  
        1、必须首次下载才 生效 < br />  
        2、不能从排行榜下载哦  
    </div>  
    <div class="cparea">  
        <div class="kwd" id="kwd"><span>三国艳义手机优化大师</span></div>                   
    </div>  
    <div class="cparea">  
        <span class=" KDE s"><b>★</b>长按虚线框,拷贝关键词</span>  
    </div>  
    <a href="https:// IT unesapplecom/cn/" data-role="button" class="downlink">去AppStore搜索下载</a>  
</div> 

JavaScript代码：

 <script ty PE ="text/javascript">  
  
$(" # 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("浏览器不支持长按复制功能");  
    }         
});  
  
</script>  

关键的CSS代码：

cparea{  
    text-align:  center ;  
    font-f ami ly: Microsoft Yah ei ;  
    mar gin : -2em 0 0;  
}  
kwd{  
    dis play : inline-block;  
    color: #272727;  
    background-color: #fff;  
    font- Size:  1875em;  
    font -s ize: 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正是为了实 现S afari浏览器上的长按全选功能，为了尊重还原设计稿效果，父容器.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);  
  
        //测试  
        console LOG (texttextContent);  
        textinnerText  &&  consolelog(textinnerText);  //FireFox不支持innerText  
        consolelog(texttextContentlength);  
        textinnerText & am  p; & consolelog(textinnerTextlength);   //在Ch rom e下长度比IE/FF下多1  
        consolelog(text First ChildtextContentlength);  
        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页面长按实现高亮全选文本内容的兼容解决方案 全部内容，希望文章能够帮你解决 详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案的详细内容...