angularjs-相容各種瀏覽器的複製到剪下板功能的程式碼
阿新 • • 發佈:2019-02-07
實現原理就是:動態生成隱藏文字域,把要複製的內容放到該文字域,然後依次執行DOM裡的選中,複製功能就可以(有些程式碼是非相關的可以忽略)。注意,不要在非直接點選觸發的函式裡用document.execCommand('copy')的方法,因為瀏覽器的安全機制會禁止使用。另外可以加判斷ta是否已經生成過,如果生成過,直接用就可以(
if(ta){return ta;})
方法程式碼:
copyJson(claimId) { var self = this; var copyClaimJsonUrl = this.urlUtils.getBackendApiUrl("claimDetail/copyClaimJson"); var model = ""; $.ajax({ type: "get", dataType: "json", data: {"claimId": claimId}, async:false, url: copyClaimJsonUrl, success: function (data) { if(data){ self.claimJson = JSON.stringify(data); } } }); var ta =this.createTempTextArea();//建立文字域 document.body.appendChild(ta); //字尾到DOM ta.value = this.claimJson; //賦值 ta.select(); //選中 var success =document.execCommand('copy');//複製 layer.msg("複製成功!"); }
動態生成隱藏文字域的程式碼:
createTempTextArea = function () { var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
var ta; ta = document.createElement('textarea'); // Prevent zooming on iOS ta.style.fontSize = '12pt'; // Reset box model ta.style.border = '0'; ta.style.padding = '0'; ta.style.margin = '0'; // Move element out of screen horizontally ta.style.position = 'absolute'; ta.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically var /** @type {?} */ yPosition = window.pageYOffset || document.documentElement.scrollTop; ta.style.top = yPosition + 'px'; ta.setAttribute('readonly', ''); return ta; };