Form event

Types of form events

input event

The input event is triggered when the values ​​of <input>, <select>, and <textarea> change. For check boxes (<input type=checkbox>) or radio buttons (<input type=radio>), this event will also be triggered when the user changes the option. In addition, for elements with the contenteditable attribute turned on, as long as the value changes, the input event will also be triggered.

One of the characteristics of the input event is that it will be triggered continuously. For example, every time the user presses a button, an input event will be triggered.

The input event object inherits the InputEvent interface.

This event is very similar to the change event. The difference is that the input event occurs immediately after the value of the element changes, while the change event occurs when the element loses focus, and the content may have changed many times at this time. In other words, if there are continuous changes, the input event will be triggered multiple times, while the change event will only be triggered once when the focus is lost.

The following is an example of the <select> element.

/* HTML code is as follows
<select id="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
*/

function inputHandler(e) {
  console.log(e.target.value);
}

var mySelect = document.querySelector("#mySelect");
mySelect.addEventListener("input", inputHandler);

In the above code, when the drop-down box option is changed, the input event will be triggered, thereby executing the callback function inputHandler.

select event

The select event is triggered when text is selected in <input>, <textarea>.

// HTML code is as follows
// <input id="test" type="text" value="Select me!" />

var elem = document.getElementById("test");
elem.addEventListener(
  "select",
  function (e) {
    console.log(e.type); // "select"
  },
  false
);

The selected text can be obtained through the selectionDirection, selectionEnd, selectionStart and value attributes of the event.target element.

change event

The change event is triggered when the values ​​of <input>, <select>, and <textarea> change. The biggest difference between it and the input event is that it will not be triggered continuously. It will only be triggered when all modifications are completed. On the other hand, the input event must accompany the change event. Specifically, it is divided into the following situations.

-Triggered when a radio or checkbox is activated. -Triggered when the user submits. For example, complete the selection from the following list (select), and complete the selection in the date or file input box. -Triggered when the value of the text box or <textarea> element changes and the focus is lost.

Below is an example.

// HTML code is as follows
// <select size="1" onchange="changeEventHandler(event);">
// <option>chocolate</option>
// <option>strawberry</option>
// <option>vanilla</option>
// </select>

function changeEventHandler(event) {
  console.log(event.target.value);
}

If you compare the above example of the input event, you will find that for the <select> element, the input and change events are basically equivalent.

invalid event

When the user submits the form, if the value of the form element does not meet the validation conditions, the invalid event will be triggered.

<form>
  <input type="text" required oninvalid="console.log('invalid input')" />
  <button type="submit">Submit</button>
</form>

In the above code, the input box is required. If you do not fill in, when the user clicks the button to submit, the invalid event of the input box will be triggered, causing the submission to be cancelled.

reset event, submit event

These two events occur on the form object <form>, not on the members of the form.

The reset event is triggered when the form is reset (all form members change back to default values).

The submit event is triggered when the form data is submitted to the server. Note that the object of the submit event is the <form> element, not the <button> element, because the form is submitted, not the button.

InputEvent interface

The InputEvent interface is mainly used to describe the instance of the input event. This interface inherits the Event interface, and also defines some of its own instance attributes and instance methods.

The browser natively provides the InputEvent() constructor to generate instance objects.

new InputEvent(type, options);

The InputEvent constructor can accept two parameters. The first parameter is a string, which represents the name of the event. This parameter is required. The second parameter is a configuration object, which is used to set the properties of the event instance. This parameter is optional. In addition to the configuration properties of the Event constructor, the fields of the configuration object can also be set to the following fields, which are all optional.

-inputType: string, indicating the type of change (see below for details). -data: string, which means the inserted string. If there is no inserted string (such as a delete operation), null or an empty string is returned. -dataTransfer: Returns an instance of a DataTransfer object. This property is usually only valid when the input box accepts rich text input.

The instance attributes of InputEvent are mainly the above three attributes, all of which are read-only.

(1) InputEvent.data

The InputEvent.data property returns a string that represents the content of the change.

// HTML code is as follows
// <input type="text" id="myInput">
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction, false);

function myFunction(e) {
  console.log(e.data);
}

In the above code, if you manually enter abc in the input box, the console will first output a, then output b on the next line, and then output c on the next line. Then select abc and delete them all at once. The console will output null or an empty string.

(2) InputEvent.inputType

The InputEvent.inputType property returns a string indicating the type of string change.

For common situations, the return value of the Chrome browser is as follows. For a complete list, please refer to document.

-Manually insert text: insertText -Paste the inserted text: insertFromPaste -Delete backward: deleteContentBackward -Delete forward: deleteContentForward

(3) InputEvent.dataTransfer

The InputEvent.dataTransfer property returns a DataTransfer instance. This attribute is only valid when the text box accepts paste content (insertFromPaste) or drag content (insertFromDrop).