Events: change, input, cut, copy, paste
In this chapter, we are going to cover different events that accompany data updates. Among them are events such as change, input, cut, copy, and paste. Let’s dive into some details.
Event: change¶
When the element has finished changing the change event triggers. For text inputs, it indicates that the event triggers when it loses the focus.
Let’s check out an example of the change event for text inputs:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="text" onchange="alert(this.value)">
<input type="button" value="Click on button">
</body>
</html>For other elements, like select, input type=checkbox/radio, it occurs just after the change of the selection, like this:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<select onchange="alert(this.value)">
<option value="">Select something</option>
<option value="One">Value 1</option>
<option value="Two">Value 2</option>
<option value="Three">Value 3</option>
</select>
</body>
</html>Event: input¶
Every time the user modifies a value, the input event triggers. As opposed to the keyboard events, it can occur on any value change, even those that don’t include keyboard actions (for example, pasting using the mouse or applying speech recognition).
Here is an example of the input event:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="text" id="input"> oninput: <span id="result"></span>
<script>
input.oninput = function() {
result.innerHTML = input.value;
};
</script>
</body>
</html>This event is the best choice if you intend to handle each modification of an <input>. On the other hand, the input event doesn’t occur on the keyboard input or other actions that do not include value change ( for example, pressing arrow keys ⇦ ⇨ during the input).
So, the event input triggers, after the value is modified. Therefore, the event.preventDefault() can’t be used in this case: it’s just a belated action and would give no effect.
Events: cut, copy, paste¶
The cut/copy/paste events are the most common ones. They trigger on cutting/copying/pasting a value.
These events are considered a part of the Clipboard event class and are used for providing access to the data that is copied/pasted. For aborting the action, here you can use event.preventDefault() . As a result, nothing will get copied/pasted.
Let’s see an example of using the cut/copy/paste events:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="text" id="input">
<script>
input.oncut = input.oncopy = input.onpaste = function(evn) {
alert(evn.type + ' - ' + evn.clipboardData.getData('text/plain'));
return false;
};
</script>
</body>
</html>The best thing is that you can copy/paste not just the text but everything you want. For example, it is possible to copy a file in the OS file manager and paste it.
But, it would be best if you noted that the clipboard is on “global” OS-level. Most of the browsers reading/writing access to the clipboard only in the extent of specific user actions for the safety ( for instance, onclick event handlers).
Also, note that you are not allowed to create “custom” clipboard events using dispatchEvent in all browsers except for Firefox.
Summary¶
In brief, we can notice that the following data change events are commonly used in JavaScript:
- the change event: it generally occurs on the focus loss for text input. So, this event triggers when a value was changed.
- the input event: it occurs for text inputs on every change. Unlike the change event, it triggers immediately.
- the cut/copy/paste events: these events occur while cutting/copying/pasting a value. Their actions can’t be prevented. The property event.clipboardData allows reading/writing access to the clipboard.
0 Comments
CAN FEEDBACK
Emoji