直接复制记录下

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