1

Recently, I noticed a strange behaviour of paste events: the value of an input element is updated after the function is triggered! If you just pass to the function the value itself or event.target.value, the function gets an old input value; the only workaround I found is to set a timeout and process event.target.value after some small random time when the input value is already updated. Is there perhaps some better solution (e.g., somethig like event.oncomplete that would allow to use the Promise API and resolve a promise after a paste operation is complete and the value of an input element is already updated?

Below is a runnable demo code snippet that shows the situation – if no timeout is set, the input element value is evaluated and changed by the function before pasting is complete:

function alertValue({ target: t }) {
  const [run, delay] = [() => {
    alert(`The value is: "${t.value}".`);
    t.value = '';
  }, document.getElementById('sel').value];
  delay ? setTimeout(run, 10) : run();
}
<h1>Paste event demo</h1>
<select id="sel">
  <option value="">Without timeout</option>
  <option value="1">WITH timeout</option>
</select><br>
<label>Paste something here:</label><br>
<input type="text" onpaste="alertValue(event)">
isherwood
  • 58,414
  • 16
  • 114
  • 157
Roman Karagodin
  • 740
  • 2
  • 11
  • 16
  • 1
    `onpaste` fires before the input's value is changed. `setTimeout` is how it is usually handled: [Javascript OnPaste](https://stackoverflow.com/questions/10972954) and [How to get the value of a field during the paste event?](https://stackoverflow.com/questions/2055224) – adiga Feb 04 '21 at 12:04
  • 1
    As of now, all modern browsers support the clipboard events' `clipboardData` property, that lets you access the data on the clipboard that is about to be pasted. – FZs Feb 04 '21 at 12:10
  • 1
    `paste` works just like `keydown` - the event that *causes* some input – Bergi Feb 04 '21 at 13:12
  • Yes, exactly. That is why I try to use not `onkeydown`, but `onkeyup` instead. Another good option is `oninput`; however with `oninput` it is impossible to track, e.g., when a user presses `enter` (because `input` events lack the `keyCode` property and also are not triggered on key presses that do not change input). So, in my project I use for updating values `onkeyup` + `onpaste`. – Roman Karagodin Feb 04 '21 at 13:18
  • As for the function `event.clipboardData.getData("text")`, it works well without timeout. However, it should be noted that it returns only the value that is being pasted, not the new value of an input element. E.g.: the input element's value was initially "my value"; then you paste "SuPeR" somewhere in the middle, and the new value is "my SuPeRvalue"; in this case, event.clipboardData.getData("text")will return only "SuPeR". And if there's a need to get the updated input elemtnt's value — NOT the pasted value — `setTimeout` seems to be the only option, though. – Roman Karagodin Feb 04 '21 at 13:20

0 Answers0