Events: change, input, cut, copy, paste

Let’s cover various events that accompany data updates.

Event: change

The change event triggers when the element has finished changing.

For text inputs that means that the event occurs when it loses focus.

For instance, while we are typing in the text field below – there’s no event. But when we move the focus somewhere else, for instance, click on a button – there will be a change event:

<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">

For other elements: select, input type=checkbox/radio it triggers right after the selection changes:

<select onchange="alert(this.value)">
  <option value="">Select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Select somethingOption 1Option 2Option 3

Event: input

The input event triggers every time after a value is modified by the user.

Unlike keyboard events, it triggers on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.

For instance:

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

oninput:

If we want to handle every modification of an <input> then this event is the best choice.

On the other hand, input event doesn’t trigger on keyboard input and other actions that do not involve value change, e.g. pressing arrow keys ⇦ ⇨ while in the input.

Can’t prevent anything in oninput

The input event occurs after the value is modified.

So we can’t use event.preventDefault() there – it’s just too late, there would be no effect.

Events: cut, copy, paste

These events occur on cutting/copying/pasting a value.

They belong to ClipboardEvent class and provide access to the data that is cut/copied/pasted.

We also can use event.preventDefault() to abort the action, then nothing gets copied/pasted.

For instance, the code below prevents all cut/copy/paste events and shows the text we’re trying to cut/copy/paste:

<input type="text" id="input">
<script>
  input.onpaste = function(event) {
    alert("paste: " + event.clipboardData.getData('text/plain'));
    event.preventDefault();
  };

  input.oncut = input.oncopy = function(event) {
    alert(event.type + '-' + document.getSelection());
    event.preventDefault();
  };
</script>

Please note: inside cut and copy event handlers a call to event.clipboardData.getData(...) returns an empty string. That’s because technically the data isn’t in the clipboard yet. If we use event.preventDefault() it won’t be copied at all.

So the example above uses document.getSelection() to get the selected text. You can find more details about document selection in the article Selection and Range.

It’s possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.

That’s because clipboardData implements DataTransfer interface, commonly used for drag’n’drop and copy/pasting. It’s a bit beyond our scope now, but you can find its methods in the DataTransfer specification.

Also, there’s an additional asynchronous API of accessing the clipboard: navigator.clipboard. More about it in the specification Clipboard API and events, not supported by Firefox.

Safety restrictions

The clipboard is a “global” OS-level thing. A user may switch between various applications, copy/paste different things, and a browser page shouldn’t see all that.

So most browsers allow seamless read/write access to the clipboard only in the scope of certain user actions, such as copying/pasting etc.

It’s forbidden to generate “custom” clipboard events with dispatchEvent in all browsers except Firefox. And even if we manage to dispatch such event, the specification clearly states that such “synthetic” events must not provide access to the clipboard.

Even if someone decides to save event.clipboardData in an event handler, and then access it later – it won’t work.

To reiterate, event.clipboardData works solely in the context of user-initiated event handlers.

On the other hand, navigator.clipboard is the more recent API, meant for use in any context. It asks for user permission, if needed.

Common mistakes

• Skipping the small examples and then missing the exact rule that Events: change, input, cut, copy, paste depends on.
• Copying code without changing one value at a time to see which part controls the result.
• Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

Data change events:

Practice

• Rewrite one example from this lesson without looking at the original, then run it and compare the result.
• Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
• Explain Events: change, input, cut, copy, paste in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Forms: event and method submit when you are ready for the next lesson.