1. 程式人生 > >angularjs-相容各種瀏覽器的複製到剪下板功能的程式碼

angularjs-相容各種瀏覽器的複製到剪下板功能的程式碼

實現原理就是:動態生成隱藏文字域,把要複製的內容放到該文字域,然後依次執行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;
};