使用onpaste粘贴事件引起的探索
前天项目有一个需求,在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() 的区别
使用onpaste粘贴事件引起的探索的更多相关文章
- 转载JQuery绑定鼠标粘贴事件工具类
// 粘贴事件监控 $.fn.pasteEvents = function( delay ) { if (delay == undefined) delay = 10; return $(this). ...
- js粘贴事件paste简单解析及遇到的坑
在用户执行粘贴操作的时候,js能够获得剪切板的内容,本文讨论一下这个问题. 目前只有Chrome支持获取剪切板中的图片数据.还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome ...
- ASP.NET jQuery 随笔 在TextBox里面阻止复制、剪切和粘贴事件
当用户要输入一些密码.信用卡信息和银行账号等敏感信息,用户更希望手工通过键盘敲入数据,而好过通过剪贴板复制粘贴. 我们先来看下实现后的效果: <%@ Page Language="C# ...
- 如何屏蔽ctrl + v 粘贴事件,鼠标右键粘贴事件
通常在自己的APP里的密码框,验证码框需要屏蔽复制,粘贴,怎么办呢? 有三种方法: 1 hook 此方法是最完全的,但由于hook是全局的,容易影响到其它代码. 2 子类化文本框, 重写OnPaste ...
- js复制粘贴事件
一.相应的事件 copy: 在发生复制操作时触发. beforecut: 在发生剪切操作 前 触发. cut: 在 发生 剪切 操作 时 触发. beforepaste: 在 发生 粘贴 操作 前 触 ...
- uedit,检测粘贴事件,替换粘贴内容
vue.editor.addListener("beforepaste",function(type, arg1, arg2){arg1.html="ddddddd&qu ...
- 怎么使用zepto.js的tap事件引起的探索
前言: 在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...
- Android View的事件分发机制探索
概述 Android事件传递机制也是Android系统中比较重要的一块,事件类型有很多种,这里主要讨论TouchEvent的事件在framework层的传递处理机制.因为对于App开发人员来说,理解f ...
- angularjs 粘贴事件
参考 http://www.jb51.net/article/89708.htm ng-paste 需要setTimeout,否则无法获取到数据
随机推荐
- 初学Python的奇葩用法
ming_piao= 11ming_yeji= 586319ming_age= 34ming_gongling= 10ming_yanjiang= 81 qiang_piao= 7qiang_yeji ...
- Hibernate 再接触 性能优化
Sessionclear 否则session缓存里越来越多 Java有内存泄露吗? 在语法中没有(垃圾自动回收) 但是在实际中会有 比如读文件没有关什么的 1+N问题 解决方法:把fetch设置为la ...
- [Ting's笔记Day6]活用套件carrierwave gem:(1)在Rails实现图片上传功能
carrierwave是一款经典的图片上传套件,本篇的目标是先在本地端(development)的rails项目试成功gem. (预计中集的进度会练习怎么利用Amazone S3架设图片上传Host, ...
- R语言-优化作图
par()函数:用来设置画图参数的函数par()的作用直到画板被关闭为止 1.设置背景颜色 #设置背景颜色 > par(bg="gray") #设置画板背景色 > pl ...
- WMS专业术语&系统功能操作培训
逻辑层:公司.分部.地区物理层:仓库.1个仓库只能属于思维的1个地区.命名规则:SCPRD_WMWHSE1货主:纳思达多货主:1个仓库可以配置1个或多个货主SKU:物料代码(stock keeping ...
- C# dns.gethostentry()获取失败,提示不存在主机
传入参数domain有误. 如果是域名,可以解析.如果是局域ip可以解析. 如果是外网,解析不成功. 解决方法: 判断传入参数是域名还是ip,如果是域名,则使用dns.gethostentry(dom ...
- http 连接 analysis service (ssas)
当数据仓库搭建好后,我们就可以通过sqlserver的管理工具查看服务器上的数据集了.但是这样挺不方便的,如果要远程访问,那么就可以通过http来连接数据仓库.要配置数据仓库http连接非常的简单.如 ...
- 129. Sum Root to Leaf Numbers pathsum路径求和
[抄题]: Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a ...
- MYSQL、SQL在LIKE里传的参数没有赋进去的原因
SQL语句 = string.Format(" where name like '%@key%' "); para.Add(new MySqlParameter("@ke ...
- F4 help for month
INCLUDE rmcs0f0m. s_month FOR s001-spmon NO-EXTENSION NO INTERVALS OBLIGATORY. AT SELECTION-SCREEN O ...