實現點選複製貼上功能
阿新 • • 發佈：2019-01-28
實現功能:實現點選轉換為固定格式的json格式;並且實現點選複製功能
使用前端程式碼實現:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="__HOME__/js/jquery.js"></script> <script type="text/javascript" src="__HOME__/js/layer/layer.js"></script> </head> <body> <div style="margin:10px auto;border:1px solid gray;width:400px;height:200px"> <h1>小工具</h1> <div class="left"> 姓名:<input type="text" name="uname" value=""><br/> 年齡:<input type="text" name="age" value=""><br/> 愛好:<input type="text" name="hoby" value=""><br/> </div> <div class="right"> <button id = "trans">點選轉化</button> </div> 轉化結果:<input type="text" name="result" value=""> <button id ="copy">複製</button> </div> </body> <script type="text/javascript"> $('#trans').on('click',function(){ var uname = $('input[name="uname"]').val(); var age = $('input[name="age"]').val(); var hoby = $('input[name="hoby"]').val(); var res ={'姓名':uname,'年齡':age,'愛好':hoby} res = JSON.stringify(res); $('input[name="result"]').val(res); }) $('#copy').on('click',function(){ var data = $('input[name="result"]').val();//要複製的內容 var oInput = document.createElement('input'); oInput.value = data; document.body.appendChild(oInput); oInput.select(); // 選擇物件 document.execCommand("Copy"); // 執行瀏覽器複製命令document.execCommand此命令牛逼 oInput.className = 'oInput'; oInput.style.display='none'; }) </script> </html>