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

时间：2022-11-18 19:22:09

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

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

1）虽然使用带有href属性的a标签在uc浏览器和百度浏览器上长按文本会出现“*复制”/“选择文本”菜单，选择该菜单后会出现“全选/复制”的菜单，但是在一些安卓手机的系统浏览器和iPhone中却被视为纯链接，只弹出“复制链接”，没有“复制文本”菜单。况且即使只考虑少部分浏览器可行，这样也给用户操作多了一步，增加了复杂度。所以该方案不可取。

2）借助selection和range的方法需要考虑到不同浏览器的兼容性，代码如下： 
function selectText(element) {
  var doc = document,
      text = doc.getElementById(element),
      range,
      selection;

  if (doc.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(text);
      range.select();
  } else if (window.getSelection) {
      selection = window.getSelection();        
      range = document.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
      /*if(selection.setBaseAndExtent){
          selection.setBaseAndExtent(text, 0, text, 1);
      }*/
  }else{
      alert("none");
  }
}


遗憾的是在iphone Safari上依然无法通过点击或长按高亮选中所有文本（既然也支持window.getSelection，为何在Safari浏览器addRange操作后文本不能默认选中，知道原因的请留言指教）。因此，该方式存在缺陷。主动选中文本区域的方法后面后附上。

3）iPhone用户可能知道，长按某一文本选区内文字周围的空白区域，Safari会自动将该选区内的文本高亮全选（目标文本需要放在独立的div块级容器内）。根据这一特性，用CSS margin修饰一下，利用这个特点，正好可以解决上述第二种方法在ios设备的不兼容。经过测试，无论安卓和ios平台，一般手机自带的系统浏览器都是可以兼容的。至于uc浏览器、百度浏览器等其他厂家的移动端产品，由于有不同的机制，只能使用这些浏览器菜单提供的“*复制”功能。

所以，我综合了第二种和第三种方式，使用jquery 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="kdes"><b>★</b>长按虚线框,拷贝关键词</span>
</div>
<a href="https://itunes.apple.com/cn/" data-role="button" class="downlink">去AppStore搜索下载</a>
</div>

JavaScript代码： 

<script type="text/javascript">

$("#kwd").bind("taphold", function(){ //不支持iPhone/iTouch/iPad Safari
    var doc = document, 
    text = doc.getElementById("kwd"),
    range, 
    selection;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range); 
    }else{
    alert("浏览器不支持长按复制功能");
    }
});

</script>

关键的CSS代码：

.cparea{
text-align: center;
font-family: Microsoft Yahei;
margin: -2em 0 0;
}
.kwd{
display: inline-block;
color: #272727;
background-color: #fff;
font-size: 1.1875em;
font-size: 1.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: 1.25em;
padding-right: .1em;
}

说明：这里的margin：2em正是为了实现Safari浏览器上的长按全选功能，为了尊重还原设计稿效果，父容器.cparea又使用了负边距来抵消这个2em的外边距。最终，不仅视觉上和设计图保持了一致，也实现了长按全选激发系统菜单。

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

最后再补充一下支持Safari下的完整方法：

$("#kwd").bind("taphold", function(){
    var doc = document, 
    text = doc.getElementById("kwd"),
    range, 
    selection;
    if (doc.body.createTextRange) {//IE
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();

    } else if (window.getSelection) {//FF CH SF
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

        //测试
        console.log(text.textContent);
        text.innerText && console.log(text.innerText);//FireFox不支持innerText
        console.log(text.textContent.length);
        text.innerText && console.log(text.innerText.length);//在Chrome下长度比IE/FF下多1
        console.log(text.firstChild.textContent.length);
        text.innerText && console.log(text.firstChild.innerText.length);
        console.log(text.firstChild.innerHTML.length);

        //注意IE9-不支持textContent
        makeSelection(0, text.firstChild.textContent.length, 0, text.firstChild);
        /*
if(selection.setBaseAndExtent){
        selection.selectAllChildren(text);
        selection.setBaseAndExtent(text, 0, text, 4);
        }
        */
    }else{
    alert("浏览器不支持长按复制功能");
    }

});
function makeSelection(start, end, child, parent) {
var range = document.createRange();
//console.log(parent.childNodes[child]);
range.setStart(parent.childNodes[child], start);
range.setEnd(parent.childNodes[child], end);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range); 
}


转载请注明来自于CSDN freshlover的空间。



标签：

相关文章