兼容性

直接复制记录下

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