移動端html5頁面長按實現高亮全選文本內容的兼容解決方式

近期須要給html5的WebAPP在頁面上實現一個復制功能：用戶點擊長按文本會全選文字並彈出系統“復制”菜單。用戶能夠點擊“復制”進行復制操作。然后粘貼到AppStore搜索相應的應用。之所以不是採用鏈接形式直接跳轉到AppStore相應應用是為了通過用戶的主動輸入關鍵詞搜索給推廣的企業App添加權重。所以這一個“復制”功能對用戶的體驗至關重要。

嘗試了一些做法。在安卓/iOS平台上的兼容性都不是非常好。在微信瀏覽器內是非常easy實現長按文本激發系統菜單。高亮全選文本內容的。

可是在其它瀏覽器的表現就不是非常一致了。

包含模擬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的外邊距。終於。不僅視覺上和設計圖保持了一致。也實現了長按全選激發系統菜單。

最后再補充一下支持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的空間。