Skip to main content

Form Events

Forms / Controls: Form Events

How does an event change function or work?​

View Answer:
Interview Response: The change event triggers when the element has finished changing. The behavior depends on the kind of element getting changed and how the user interacts with the element. The change event fires at a different moment. For text inputs, the event occurs when it loses focus.

Code Example: text input

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

Code Example: For other elements the 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>

Can you explain how an input event functions when triggered?​

View Answer:
Interview Response: The input event triggers whenever the user changes a value. It initiates any value change, even ones that do not require keyboard activities, such as copying with a mouse or using speech recognition to dictate the text. This event is the ideal solution if we want to handle every change to an ‹input›. In contrast, the input event does not trigger through a keyboard input or other activities that do not require a value change, such as hitting the right or left arrow keys when in the input.

Code Example:

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

After we update the value, the input event happens. As a result, we are unable to use event. It's too late to use preventDefault() there — the consequence would be null.

What class do the cut, copy, and paste events belong to?​

View Answer:
Interview Response: They belong to ClipboardEvent class and provide access to the data that is copied/pasted.

Can you explain how the cut, copy, and paste events work?​

View Answer:
Interview Response: These events occur when you cut, copy, or paste a value. They are members of the ClipboardEvent class and offer access to copied/pasted data. We may alternatively use event.preventDefault() to cancel the operation, which means nothing is copied or pasted.

Code Example:

<input type="text" id="input" />
<script>
  input.oncut =
    input.oncopy =
    input.onpaste =
      function (event) {
        alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
        return false;
      };
</script>
note

It is possible to copy/paste everything, not just text. For example, we can copy and paste a file from the OS file manager. This behavior is because clipboardData implements the DataTransfer interface, which we often use for drag'n'drop and copy/paste.

View Answer:
Interview Response: Yes, the clipboard is a “global” OS-level application program interface. So, most browsers allow read/write access to the clipboard only in the scope of specific user actions for security, e.g., an onclick event handlers. Also, it is forbidden to generate “custom” clipboard events with dispatchEvent in all browsers except Firefox.

Code Example:

<input type="text" id="input" />
<script>
  input.oncut =
    input.oncopy =
    input.onpaste =
      function (event) {
        alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
        return false;
      };
</script>