利用剪下板JS API優化輸入框的貼上體驗
阿新 • • 發佈:2018-11-29
相容性
直接複製記錄下
/** @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鑫空間版權所有'); } });