说起前端开发，我最烦的就是剪贴板事件了。因为每种浏览器都有它特别的方法来处理这个事儿，每次处理都让人头疼得不行。今儿个咱俩既然说到这事儿了，那我就分享下我的真实经验。
IE的先驱地位
学习制作网页的时候，IE浏览器的剪切板功能真是让我大开眼界！那会儿，它还是唯一可以用JavaScript操作剪贴板的浏览器！IE的做法成为了行业标准，其他浏览器也跟着这么干。每次能用clipboardData对象读取和写入剪贴板，真的是满满的成就感！
Firefox、Chrome和Safari的跟进
新版Firefox3+、Chrome和Safari2+等浏览器越来越火爆，支持了大部分和IE类似的剪贴板功能。这个改变棒极了，因为更多浏览器能够使用剪贴板，项目开发变得轻松多。但是，问题来了，每种浏览器都稍微有点儿不同，兼容性问题实在让人头疼。
Opera的特立独行
Opera浏览器真让人恼火！每次想用JavaScript处理剪贴板时总是不成，只好折腾些别的方法，比如说屏蔽键盘上某个键，甚至不让用户出现上下文菜单啥的。
事件触发的微妙之处
火狐、谷歌浏览器和Safari这三款浏览器，要想在文本框中感受到beforecopy、beforecut和beforepaste事件的效果，得等它弹出下拉菜单才行；而copy、cut和paste这种，就更随意了，无论在哪种浏览器上都可以直接通过选择选项或按下快捷键来触发。所以说，这两者差别还是挺大的！
就算删了那个引发剪贴板动作的东西，还是挡不住复制粘贴这些事儿。真要彻底拦住，就得把copy、cut和paste这几个步骤都给禁了！原来电脑程序里头的“弯弯绕”这么复杂！
clipboardData对象的差异
不同浏览器里，clipboardData这个东西用起来可真不一样像IE这样的老古董就能当做window对象的属性来直接找出来；但Chrome和Safari这些新款就要靠event对象去摸索了，还只限于剪贴板操作的时候能用。这样让我做跨浏览器兼容的代码时，可是烦心事儿不断呀。
getData()和setData()方法的应用
//获取剪贴板数据方法
function getClipboardText(event){ var clipboardData = event.clipboardData || window.clipboardData; return clipboardData.getData("text");
};
//设置剪贴板数据
function setClipboardText(event, value){ if(event.clipboardData){
return event.clipboardData.setData("text/plain", value);
}else if(window.clipboardData){
return window.clipboardData.setData("text", value); }
};
关于clipboardData这个玩意儿，你可得知道怎么用它。首先有getData()函数，可以在复制的东西里找到你想要的信息。然后还有setData()，就是用来把你的东西存进去的。成功的话，可以看到屏幕上显示一句“做得好！”，如果失败了，就会提示你“不可以~”除了这个，还要注意的是，setData()的用法要看浏览器支持哪些格式，别搞混！
这几个小技巧，让操作剪切板变得轻松简单！比如，想输进某个字符或者格式到文本框里，直接瞅瞅剪贴板不就行了~保证你一目了然，不怕搞错咯。
paste事件的妙用
用上Paste事件，就能判断剪切板选择的东西能不能用。靠这个onpaste事件处理，一旦确认OK，就能快速把它们输到文本框去，这样操作起来可太顺手！
Opera中的额外挑战
在Opera浏览器里，要是剪切板搞事情，可得费点儿工夫。比如，关掉那些可能惹祸键盘操作，还有就是不让白底蓝字的下拉菜单弹出来。虽然麻烦点儿，但也得让我在开发过程中更加细致入微，毕竟用户体验才是王道！
总结与反思
跟剪贴板打交道这么多年后，我觉得前端挺有趣的。那些浏览器版本之间的差别和兼容性问题，确实让人费劲儿，但反过来看，这也让我学到了不少东西，更喜欢这个充满创新和挑战性的行业。
window.onload = function(){
var oInp = document.getElementById("inp");
function getClipboardText(event){
var clipboardData = event.clipboardData || window.clipboardData;
return clipboardData.getData("text");
};
oInp.addEventListener('paste',function(event){
var event = event || window.event;
var text = getClipboardText(event);
if(!/^d+$/.test(text)){
event.preventDefault();
}
}, false);
}
以后，我得学学前端开发上的新东西，让你们用起来更顺心。还有希望浏览器厂商能把规范定好，这样咱们少操点心。
问你们个事哈：你们在搞前端编程时有没遇到过什么麻烦事儿和剪贴板有关？怎么弄好的呀？别藏着掖着了快教教大伙儿！记得点赞转发分享，大家一起来推动前端技术进步！
评论0