利用剪切板JS API優化輸入框的粘貼體驗 轉

兼容性

直接複製記錄下

/**
@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鑫空間版權所有');
    }
});