H5點擊復制到粘貼板

功能場景

h5頁面需要點擊復制內容，到手機的粘貼板。

運用插件clipboard

插件下載地址：clipboard官網

插件使用

	//html部分
	<div class="btn">點我復制</div>
	<input id="title1" type="text" value="復制功能測試" readonly="readonly" />

	//js部分
    function copymsg() {
    	var Url2 = document.getElementById("title1");//要復制文字的節點
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//區分iPhone設備
            window.getSelection().removeAllRanges();//這段代碼必須放在前面否則無效
            var range = document.createRange();
            // 選中需要復制的節點
            range.selectNode(Url2);
            // 執行選中元素
            window.getSelection().addRange(range);
            // 執行 copy 操作
            var successful = document.execCommand('copy');

            // 移除選中的元素
            window.getSelection().removeAllRanges();
        } else {
            Url2.select(); // 選擇對象
            document.execCommand("Copy"); // 執行瀏覽器復制命令
        }
    }
    $(".btn").click(function() {
        	copymsg();
    });

注意事項

這里的input可以換成div但是寫法會有所區別，詳細見官網介紹。
個人建議用input，因為這個兼容性最好。還有input標簽內容不能opacity:0,也不能display:none;它必須在頁面中顯示。
我的做法是，讓它字體顏色、input背景顏色都與頁面背景色一致。這樣就能解決這個兼容問題了。