[JS]點擊input全選&加上copy按鈕

程式碼來源 http://blog.yam.com/hanasan/article/133334545

在input裡面加上onfocus="this.select()"就會有滑鼠點擊後全選的效果

<input style="width: 80%;" type="text" class="js-link" value="" onfocus="this.select()">

若是要加上一個按鈕讓它能夠複製input內的文字

<button  class="js-copybtn ">Copy</button>

<script>
 var copyBtn = document.querySelector(".js-copybtn"); 
 copyBtn.addEventListener("click", function(event) { 
         var Link = document.querySelector(".js-link"); 
         var range = document.createRange();
  range.selectNode(Link);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  try {
   var successful = document.execCommand("copy"); 
   var msg = successful ? "successful" : "unsuccessful"; 
   console.log("Copy command was " + msg);
  } catch(err) {
   console.log("Oops, unable to copy");
  }
  window.getSelection().removeAllRanges();
 });
</script>

實際測試後發現原本的程式碼會產生Discontiguous selection is not supported.這個錯誤，所以在window.getSelection().addRange(range);之前加上window.getSelection().removeAllRanges();就能夠順利地跑出我想要的結果了。

Demo