paste & input:侦听浏览器粘贴事件
来源:互联网 发布:淘宝new balance真店 编辑:程序博客网 时间:2024/06/06 15:03
paster和input都能够侦听Dom的粘贴操作(如果是ctrl+v操作,那么keydown都可以完成任务,但是右键粘贴就不行了),这两个事件用得很少,我没有遇到问题之前都没有注意到这两个事件的存在。这两个事件看起来很相似,但是还是有区别的,不能通用。
input
// w3schools的定义
The oninput event occurs when an element gets user input.
This event occurs when the value of an or element is changed.
#usagefunction handleInput(ev) { alert(ev.target.value);}window.onload = function() { document.getElementById('myTextArea').addEventListener('input',handleInput,false);}
根据定义,input是Level 3 Event,IE8不支持input事件的。事实上这是一个更替change和press的高级事件,侦听的不仅仅是粘贴,还包括任何的输入事件。但是如果要支持IE8,那么只能放弃这个事件了。
paste
//w3schools的定义
The onpaste event occurs when the user pastes some content in an element.
这个事件所以浏览器都支持,但是问题是当事件促发时,input事实上没有change,也就是无法即时获取输入框的内容。这个事件应该命名为pasting或者beforePaste更加合理。
$("#message-content").on('paste', contentHandler);function contentHandler(e){ var textArea = $(this); //此处不能获取当前的输入修改 console.log(textArea.val());}
但是也并非没有方法解决问题,只需要添加timeout就可以获取输入框变化后的内容:
$("#message-content").on('paste', contentHandler);function contentHandler(e){ var textArea = $(this); setTimeout(function(){ console.log(textArea.val()); }, 200);}
综上所述,如果无需兼容IE8,那么oninput是更好的选择,如果要支持IE8,那么最好选择onPaste了。
0 0
- paste & input:侦听浏览器粘贴事件
- DOM事件侦听--适应各浏览器
- 监听浏览器复制粘贴事件
- Android 拷贝/粘贴(Copy/Paste)
- 侦听键盘事件
- 侦听点击事件
- 在里 侦听事件
- 鼠标事件侦听;
- 事件侦听---java
- iOS耳机侦听事件
- cocos2dx 触摸侦听事件
- 侦听UIButton事件
- cocos2dx 事件侦听
- 键盘侦听事件
- 添加鼠标事件侦听
- android触摸事件侦听
- Android Copy and Paste 复制粘贴
- vim中粘贴保留格式 :set paste
- linux block IO open的顺序图
- http_build_query用法,挺方便的
- MySql中添加用户,新建数据库,用户授权,删除用户,修改密码
- 2015年IEEE可视化机器学习与可视化
- java算法
- paste & input:侦听浏览器粘贴事件
- CSS颜色代码大全
- WebAPI——自动生成帮助文档
- 小Bug锦集(记录一些编程中遇到的Bug)
- 跟着猫哥学Golang[12] - 结构体的方法
- Unity3d 游戏资源打包加密(图片/XML/TXT等) C#编码
- servlet生命周期,servlet与cgi区别
- Android 实时录音和回放,边录音边播放 (KTV回音效果)
- log4j:WARN No appenders could be found for logger