input
16 March, 2023
0
0
0
Contributors
About
The input event is triggered whenever the value of an input element, such as a text input or textarea, is changed by the user. This event can be used to detect when the user is typing or deleting characters, pasting content, or using the browser's autocomplete feature to fill in a field.
The input event is similar to the change event, which is also triggered when the value of an input element changes, but with some important differences. The change event is only triggered when the user has finished making changes to the input field and moves the focus to another element or presses the Enter key. In contrast, the input event is triggered whenever the value of the input field changes, even if the user has not finished typing or the input field does not lose focus.
The input event is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. It can be used with any input element that can accept user input, including text inputs, password inputs, textareas, and contenteditable elements. The input event can be used to implement a variety of functionality, such as real-time form validation, live search suggestions, and dynamic formatting of user input.
Event listener
Here's an example of how to add an event listener for the input event:
HTML
<input type="text" id="myInput">JavaScript
const inputElement = document.getElementById("myInput");
inputElement.addEventListener("input", function() {
// Code to execute when the input value changes
});When the user types or pastes text into the input field, or changes the value of a select element, the code inside the event listener function will be executed.
The input event is often used in combination with other events, such as the change event, which is triggered when the value of a form field is changed and the field loses focus. The input event is triggered more frequently than the change event, as it is triggered immediately when the user types or pastes text, whereas the change event is only triggered when the field loses focus. Therefore, if you need to detect changes in a form field in real-time, the input event is usually the best choice.
Property
You can use the oninput property to attach an input event handler to an element:
const myInput = document.getElementById('myInput');
myInput.oninput = function() {
console.log('Input changed!');
};Here, we have an input element with an ID of myInput. We use the getElementById() method to get a reference to the element, and then assign an input event handler to the oninput property using an anonymous function. Whenever the user types or deletes characters in the input field, the function will be called and the message 'Input changed!' will be logged to the console.
Inline
Here's an example of using the oninput property in an inline script:
HTML
<input type="text" id="myInput" oninput="handleInput()">JavaScript
function handleInput() {
console.log('Input changed!');
}Here, we have an input element with an ID of myInput, and we've added an oninput attribute to the element that calls a function called handleInput() whenever the input field value changes. The handleInput() function simply logs a message to the console.
Note that using inline event handlers like this is generally not recommended, as it can make the HTML code harder to read and maintain. It's better to use the addEventListener() method or assign the event handler to the oninput property using JavaScript code, as shown in the previous examples.
Programmatic trigger
There is no built-in input() method that you can use to programmatically trigger an input event on an element. Instead, you can use the dispatchEvent() method to manually create and dispatch an input event
const myInput = document.getElementById('myInput');
// Dispatch an input event
const inputEvent = new Event('input');
myInput.dispatchEvent(inputEvent);
// Add an input event handler
myInput.addEventListener('input', function() {
console.log('Input changed!');
});Here, we create a new input event using the Event() constructor, and then dispatch the event using the dispatchEvent() method on the input element. This will trigger the input event on the element, even though the user did not interact with the input field.
We also add an input event handler to the input element using the addEventListener() method, which logs a message to the console whenever the input value changes.
Keep in mind that programmatically triggering events in this way can be useful in some cases, but it's generally better to let the user interact with the input field to trigger the event, as this will ensure that your code is more closely aligned with user behaviour.
javascript
input
javascriptevent