• The project uses the jquery framework
  • Pure H5 copy and paste
  • Fixed iscroll4 blocking all default events, long press can’t pop up copy menu

The project needs to write a pull-up loading page, and the logistics information in the page needs to be copy-pasted and compatible with ios9 and Android 4.0.0. After a lot of searching, clipboard is finally used. The following code

<p class="wldh">Logistics tracking Number: Zhongtong 123904040209<i class="copy copytkl_btn" data-clipboard-text="Copied content" onclick="copyToBoard()">copy</i>
</p>
Copy the code
function copyToBoard(mytext){
  var copyBtn = new ClipboardJS('.copy');
  copyBtn.on("success".function(e){
    mui.toast('Copy successful'{}); e.clearSelection(); }); copyBtn.on("error".function(e){
    // Replication failed;
    mui.toast('Copy failed, please long press copy'{});console.log( e.action );
  });
}
Copy the code

The effect is shown in figure

In android and ios mainstream models are normal, but in ios9 and Huawei Honor some models (Android 4.0.0) can not copy, the pop-up ‘copy failed, please long press copy’ statement

Solution {pure CSS can be solved)

-webkit-user-select:text; -webkit-user-select:text; } p{ -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }Copy the code

However, the page uses IScroll4 (pull-up loading), which blocks all default events on the page and prevents a long press from popping up the copy menu. The cost of converting iscroll5 is slightly higher and the page is not as smooth as iscroll4. According to www.bbsmax.com/A/6pdD1xjRzw changed iscroll4 source code, source code link https://pan.baidu.com/s/1LpIPyO5OqEZxHUrJ6C5Pcw to extract the code as follows: 1 VBP

The modified page is as follows

preventDefaultException:".wldh|.posdetail|.sqtime|.zftime"
Copy the code

Add to the pull-up load page

    // Pull up load
    if (document.getElementById("wrapper1") != null) {
		var myscroll = new iScroll("wrapper1", {
			preventDefaultException:".wldh|.posdetail|.sqtime|.zftime".onScrollMove: function () { / / pull
				// Pull up load
				if (this.y < this.maxScrollY - 50) {$("#wrapper1 .pull-loading").html("Release load");
				$("#wrapper1 .pull-loading").addClass("loading");
				} else{$("#wrapper1 .pull-loading").html("Pull up load");
				$("#wrapper1 .pull-loading").removeClass("loading"); }},onScrollEnd: function (e) { // When the pull ends
				// Pull up load
				if ($("#wrapper1 .pull-loading").hasClass('loading')) {$("#wrapper1 .pull-loading").html("Loading...");
				pullOnLoad1(); // Call the method to get data}}}); }Copy the code

PS: It has been a long time before I found a solution. I hope it can help you.