通過 js 複製隱藏域的內容

1、HTML部分

<div class="wrapper">
  <h3>Click button below to copy current url to clipboard with hidden input</h3>
  <input type="hidden" id="input-url" value="Copied!">
  <button class="btn-copy">Copy</button>
</div>

2、CSS部分

.wrapper{
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top:10px;
}
.btn-copy{
  background-color: #38AFDD;
  border: transparent;
  border-bottom: 2px solid #0086B7;
  border-radius: 2px;
  padding: 10px;
  min-width: 100px;
  color: #fff;
}
.btn-copy:hover, .btn-copy:focus{
  background-color: #48A1C1;
  border-bottom: 2px solid #38AFDD;
  /*transition cross browser*/
  transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition: all .3s ease-in;
}

3、JS部分
var clipboard = new Clipboard('.btn-copy', {
    text: function() {
        return document.querySelector('input[type=hidden]').value;
    }
});
clipboard.on('success', function(e) {
  alert("Copied!");
  e.clearSelection();
});
$("#input-url").val(location.href);
//safari
if (navigator.vendor.indexOf("Apple")==0 && /\sSafari\//.test(navigator.userAgent)) {
   $('.btn-copy').on('click', function() {
var msg = window.prompt("Copy this link", location.href);

});
  }


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