前天项目有一个需求,在Excel文档里面直接复制商品编码,然后粘贴到页面空白处就把相应的数据加载出来。当时我是懵逼的,不知道如何下手。
以前没遇到过类似的需求,后来才想起onpaste事件
在使用onpaste事件时遇到了2个问题:
第1个问题:jquery绑定onpaste事件以后,如何能获取到粘贴之后的值?
解决方法:使用如下代码即可,原文出处
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> I have a textarea, on paste to that textarea I want to <textarea id="content" cols="50" rows="5"></textarea> </body> <script src="js/jquery-1.11.3.js"></script> <script> jQuery(function($) { $('#content').bind('paste', function(e) { var pastedText = undefined; if(window.clipboardData && window.clipboardData.getData) { // IE pastedText = window.clipboardData.getData('Text'); } else { pastedText = e.originalEvent.clipboardData.getData('Text'); //e.clipboardData.getData('text/plain'); } alert(pastedText); }); }); </script> </html>
第2个问题:在下图空白处按ctrl+v以后右下角会提示要先输入客户名称,但是要按2次ctrl+v,右下角的弹框才出来;
而且只有第一次需要按2次,如果刷新页面或者按第3次ctrl+v以后就可以直接弹出来了,如下图:
解决方法: 在经过多次测试之后,我发现是绑定事件的问题,这里不应该用bind,或者on,应该用live
(这里使用on的话也可以解决这个问题,但是会出现另一个问题,所以没用)
很多文章建议停止使用.live()方法,因为它已经被弃用了,并存在一些问题,
目前我也不知道是什么原因导致这个问题,我只有使用这个方法才能解决这个问题)
注:详解jQuery中 .bind() -.live() - .delegate() - .on() 的区别
详解jQuery中 .bind() -.live() - .delegate() - .on() 的区别
有需要的朋友可以领取支付宝到店红包,能省一点是一点