201911261708複製輸入框文字到剪貼簿 - javascript - Copy Text to Clipboard

 複製輸入框文字到剪貼簿,簡單又實用的小技巧,其實 W3C 就有教 XDD ,簡單來說一下怎麼做

假設你有個輸入框或是LABEL,想讓使用者可以簡單的複製裡面文字放到剪貼簿 Clipboard 中,例如
<asp:TextBox ID="txt_output" runat="server" ></asp:TextBox>
或 
<input type="text" value="" id="txt_output">

然後使用一個按鈕去做複製的動作,以 Javascript 的 copyurl() function 去呼叫

<button onclick="copyurl()" style="height:36px; font-size:1.2em; ">複製短網址</button>

 

最後~

只需要 <body>內或使用 .js 呼叫進來底下這段程式碼,

<script>
   function copyurl() {
       var copyText = document.getElementById("txt_output");
       copyText.select();
       copyText.setSelectionRange(0, 99999)
       document.execCommand("copy");
    }
</script>

便可以複製文字到剪貼簿的功能啦~~

當中的

  • 輸入框名稱 txt_output 必須對應
  • Javascript 的函示名稱 copyurl() 必須對應
  • 99999 是限制取字數的大小,設成10 就會取10個字,不論中文字或英文字母都算一個字唷~ 
    例:tolarku 是黃昏的甘蔗 取10個字...會複製「tolarku 是黃」到剪貼簿

 

參考:https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

~END

回應
Google Search
Google
累積 | 今日
loading......
平均分數:0 顆星
投票人數:0
我要評分:
Google