用鼠标处理粘贴。 使用ctrl + v进行粘贴时，将event.target.value设置为我粘贴的任何字符串，但是当使用鼠标进行粘贴时，不会

Question

When pasting into an input field of my widget with ctrl + v the event.target.value where event is an keyup event is set to whatever string I pasted. When doing paste by mouse using context menu event.target.value whever event is an paste event whatever was in the input field before pasting, not what I want to paste.

Is it any common issue, how to handle the paste event after the contents are in the input field?

Answer 1

The paste event fires first, then event.target.value changes. That's why you get old value. Look here for the details https://www.w3.org/TR/clipboard-apis/

You can handle it with addEventListener for paste event and operating with clipboardData . Look through example below.

 document.getElementById('testPaste2').addEventListener('paste', function(ev){ if(ev.clipboardData.types.indexOf('text/plain') > -1){ alert(ev.clipboardData.getData('text/plain')); } }); var inputs = document.getElementsByTagName('input'); for(i=0; i<inputs.length; i++){ inputs[i].addEventListener('keyup', function(ev){ alert(this.value) }); } 

 <p><label for="testPaste1">Without event listener <input type="text" id="testPaste1"></label></p> <p><label for="testPaste2">With event listener <input type="text" id="testPaste2"></label></p>