網頁上按一下複製文字到剪貼簿(附小雷點)
最近遇到需求想要在網頁上加入按一下複製內容到剪貼簿的功能，中間還不小心遇到小雷點分享一下。
我建構一個簡單的文字input放置要給使用者拷貝的資料，以及一個按鈕讓使用者點選複製到剪貼簿
1. body標籤放置
<input type="text" value="Hello World" id="myInput">
<button onclick="copyToClipboard(this);" data-input-id="myInput">
<i class="fa fa-clipboard" aria-hidden="true"></i>
</button>
按鈕上放置了一個fontawesome v4.7的剪貼簿圖示
2. script標籤放置
<script>
function copyToClipboard(e) {
console.log('input id:', e.dataset.inputId);
var input = document.getElementById(e.dataset.inputId);
navigator.clipboard.writeText(input.value);
alert('已經拷貝整個文字"' + input.value + '"');
}
</script>
雷點說明
這裡遭遇是如果onclick的copyToClipboard上使用event而不是this, 就會讓copyToClipboard內的e.target產生兩種狀況。1. 點擊圖示 2. 點擊其他空白處，會產生不同的e.target，導致我要用dataset取的目前連結的input id失敗。
留言