JS複製內容到剪貼板

項目要實現複製內容到剪貼板,想到使用JS實現,剛開始使用window.clipboardData,但是window.clipboardData只有IE能夠實現剪貼,其他瀏覽器不行。

後面試過試用js插件——ZeroClipboard,據說兼容各大瀏覽器,但是由於自己使用的前端框架問題,標籤不能使用這個的標籤,後來就使用了execCommand來實現這個功能,兼容性和注意問題如下,

 


/**
 * 複製文本到剪貼板
 */
function copyToClipBoard(){
	var text= "Hello World....";//複製的內容
    /**如果內容是界面的一個元素,可以直接讀取元素getElementById()
       這裏是因爲界面沒有input元素,所以自己創建一個元素來作爲載體把內容複製到剪貼板
    **/
	var inputEle = document.createElement("input");//創建一個input元素
	//判斷並控制整個HTML文檔可編輯
	if(!(document.designMode == "on")){
		document.designMode = "on";
	}
	inputEle.value = text;//把複製的內容賦給input的內容
	document.body.appendChild(inputEle);//把input元素綁定到document,不然操作不到
    // 判斷元素是否能被選中
    if (inputEle&&inputEle.select) {
      // 選擇文本
	  // inputEle.focus(); 
	  inputEle.select(); //或: inputEle.setSelectionRange(0, inputEle.value.length);
      try {
        // 複製文本
       document.execCommand('copy');
      } catch (err) {
        alert('由於瀏覽器安全設置,不支持複製功能!!!');
      }
      inputEle.blur();//失去焦點
      inputEle.style.display="none";//隱藏元素
      document.body.removeChild(inputEle);//刪除元素
      document.designMode = "off";//文檔設爲不可編輯,否則界面的其他元素可能被影響
      alert('複製成功');
    }

}

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章