js 實現復制到粘貼板功能
阿新 • • 發佈：2018-07-13
jsp document lang script child lec 測試 tro func
前言：js 或者 jquery 都可以實現的復制到粘貼板功能，有時還想要有換行等格式（同 textarea）
demo
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <title>測試</title> </head> <body> <buttonid="btn1">復制自定義內容到粘貼板</button> <br/> 框1 <textarea id="txt"></textarea> <br/> <button id="btn2">復制框1內容到粘貼板</button> <br/> 框2 <textarea id="txt3"></textarea> <button id="btn3">復制框1內容到框2，同時到粘貼板</button> <script type="text/javascript"> window.onload = function(){ function copyValue(val){ //如果這裏換為 input 則不支持換行 var temp = document.createElement(‘textarea‘); temp.value = val; document.body.appendChild(temp); temp.select();// 選擇對象 document.execCommand("Copy"); // 執行瀏覽器復制命令 temp.style.display=‘none‘; console.log(‘復制成功‘); } document.getElementById("btn1").onclick = function () { copyValue("1234\n復制成功了\n而且有換行的呢"); }; document.getElementById("btn2").onclick = function () { copyValue(document.getElementById("txt").value); }; function copyValue2(val){ var oInput = document.getElementById(‘txt3‘); oInput.value = val; oInput.select(); // 選擇對象 document.execCommand("Copy"); // 執行瀏覽器復制命令 console.log(‘復制成功‘); } document.getElementById("btn3").onclick = function () { copyValue2(document.getElementById("txt").value); }; }; </script> </body> </html>
註意：如果需要支持換行則需要用 textarea
js 實現復制到粘貼板功能