使用 JS 剪貼簿 API
現在的狀況
- 一般情況下我們會在網頁上使用大量的3複製貼上的操作。
- 但是也可以看到在 360文庫中的禁止複製貼上或者知乎的那樣複製貼上的時候會自動帶有一段文字的版權宣告。
Clipboard API（剪貼簿 API）
- 首先當然是看看各大瀏覽器的支援程度
- caniuse.com/#feat=clipb…
- 其次研讀一下 MDN 的文件
- 屬性
ClipboardEvent.clipboardData- 是一個 DataTransfer 物件，它包含了由使用者發起的 cut 、 copy 和 paste 動作所影響的帶有 MIME 型別的資料。
這是一個實驗中的功能 此功能某些瀏覽器尚在開發中，請參考
瀏覽器相容性表(caniuse.com/#feat=clipb…)格以得到在不同瀏覽器中適合使用的字首。由於該功能對應的標準文件可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。
禁止複製貼上
<div oncopy="alert('複製被阻止!'); return false;">試著複製這句話!</div>
<h3>Log</h3>
<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
複製程式碼複製貼上新增版權說明
- 你也可以直接看看 codepen 的程式碼
<p>這是一篇學術文章：</p>
<p>未經作者允許請勿他用</p>
<textarea id="input" placeholder="複製貼上這裡來"></textarea>
//javascript
<script>
(function(){
//獲取複製事件
document.addEventListener('copy', function (event) {
//獲取複製的資料
var clipboardData = event.clipboardData || window.clipboardData;
if (!clipboardData) { return; }
//返回一個 Selection 物件，表示使用者選擇的文字範圍或游標的當前位置
// 獲取當前使用者游標選擇的文字
var text = window.getSelection().toString();
if (text) {
event.preventDefault();
//重新設定貼上板的文字
clipboardData.setData('text/plain', text + '\n\n版權所有，商用必究');
}
});
})()
</script>
複製程式碼JS改變剪下板內容
-
當我們拖拽文字進入輸入框的時候,有時候需要的文字格式有所變化，我們可以直接進行處理
-
比如 138-1231-123
-
複製貼上後就 1381231123
-
使用
drop來實現
input.addEventListener('drop', function (event) {
// 獲取拖拽文字內容
var text = event.dataTransfer.getData('text');
if (this.value == '' && text.match(/\d/g) && text.match(/\d/g).length == 11) {
event.preventDefault();
input.value = text.replace(/\D/g, '');
input.select();
}
});
複製程式碼