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
原创粉丝点击