直接複製記錄下

/**@description 表單輸入框粘貼體驗優化，出處https://www.zhangxinxu.com/wordpress/?p=8003@author zhangxinxu*/// 遍歷所有的輸入框[].slice.call(document.querySelectorAll('input, textarea')).forEach(function (ele) { ele.addEventListener('paste', function (event) { // 輸入框類型 var type = this.getAttribute('type') || this.type; // 剪切板數據對象 var clipboardData = event.clipboardData || window.clipboardData; // 粘貼內容 var paste = ''; // 剪切板對象可以獲取 if (!clipboardData) { return; } // 獲取選中的文本內容 var textSelected = ''; if (window.getSelection) { // 現代瀏覽器 // 直接window.getSelection().toString()對於IE的輸入框無效 textSelected = this.value.slice(ele.selectionStart, ele.selectionEnd); } else if (document.selection) { // 舊IE瀏覽器 textSelected = document.selection.createRange().text; } // 只有輸入框沒有數據，或全選狀態才處理 if (this.value.trim() == '' || textSelected === this.value) { // 阻止冒泡和默認粘貼行爲 event.preventDefault(); event.stopPropagation(); // 獲取粘貼數據 paste = clipboardData.getData('text') || ''; // 進行如下處理 // 除非是password，其他都過濾前後空格 if (type != 'password') { paste = paste.trim(); } // 郵箱處理，可能會使用#代替@避免被爬蟲抓取 if (type == 'email') { paste = paste.replace('#', '@'); } else if (type == 'tel') { // 手機號處理 paste = paste.replace(/^\+86/, ''); // 如果此時剩餘所有數字正好11位 if (paste.match(/\d/) && paste.match(/\d/g).length == 11) { paste = paste.replace(/\D/g, ''); } } // 其他類型處理大家自行補充... // 插入 this.value = paste; } }); });

拖拽也可以使用

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(); }});

基於剪切板JS API可以做的事情不僅僅是粘貼，複製的時候也可以做些事情，例如，我可以在我的網站頁面上綁定一個copy事件，當你複製文章內容的時候，自動在剪切板文字後面加上一段版權聲明。

代碼示意：

document.addEventListener('copy', function (event) { var clipboardData = event.clipboardData || window.clipboardData; if (!clipboardData) { return; } var text = window.getSelection().toString(); if (text) { event.preventDefault(); clipboardData.setData('text/plain', text + '\n\n鑫空間版權所有'); }});