oninput event | input event
| 9 | ||||
Occurs when the text content of an element is changed through the user interface.
Note: The oninput event is supported in Internet Explorer from version 9.
The oninput is useful if you want to detect when the contents of a textarea, input:text, input:password or input:search element have changed,
because the onchange event on these elements fires when the element loses focus, not immediately after the modification.
The oninput event is supported in Internet Explorer from version 9.
If you need an event that fires when the contents of these elements are modified in Internet Explorer before version 9, use the onpropertychange event.
The oninput event is buggy in Internet Explorer 9.
It is not fired when characters are deleted from a text field through the user interface only when characters are inserted.
Although the onpropertychange event is supported in Internet Explorer 9, but similarly to the oninput event, it is also buggy, it is not fired on deletion.
Since characters can be deleted in several ways (Backspace and Delete keys, CTRL + X, Cut and Delete command in context menu), there is no good solution to detect all changes.
If characters are deleted by the Delete command of the context menu, the modification cannot be detected in JavaScript in Internet Explorer 9.
Always use the addEventListener method in Internet Explorer 9 to register an event listener for the oninput event.
The attachEvent method does not work for the oninput event.
The oninput event is not supported for textarea elements in Safari before version 5, use the textInput event instead in that browsers.How to register:
In HTML:
In JavaScript:
| <ELEMENT oninput="handler"> |
|
In JavaScript:
| object.oninput = handler; |
| ||||||||||
| object.addEventListener ("input", handler, useCapture); |
| ||||||||||
| object.attachEvent ("oninput", handler); |
You can find the related objects in the Supported by objects section below.
The event object is accessible to all event handlers in all browsers.
The properties of the event object contain additional information about the current event.
To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
| For a complete list of events, see the page for Events in JavaScript. |
Basic information:
| Bubbles | No |
| Cancelable | No |
| Event object | Event |
Actions that invoke the oninput event:
- Entering some text into an element.
- Cutting, deleting or pasting some content.
- Dropping some content into an element. (only in Google Chrome and Safari)
Actions that do not invoke the oninput event:
- Changing the contents of the element from JavaScript.
The order of events related to the oninput event:
| Action | Event order |
|---|---|
| Entering some text into an element. |
|
| Cutting or pasting some content. |
Example HTML code 1:
This example shows how to use the oninput and onpropertychange events to detect when the contents of an input:text element is changed. Both the oninput and onpropertychange events are supported in Internet Explorer 9, but both of them are buggy. They are not fired when characters are deleted only when inserted. For further details, please see the description on the top of this page.
|
|
||||
<head> <script type="text/javascript"> // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 function OnInput (event) { alert ("The new content: " + event.target.value); } // Internet Explorer function OnPropChanged (event) { if (event.propertyName.toLowerCase () == "value") { alert ("The new content: " + event.srcElement.value); } } </script> </head> <body> Please modify the contents of the text field. <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" /> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 2:
This example shows how to use the oninput, onpropertychange and textInput events to detect when the contents of a textarea element is changed. Both the oninput and onpropertychange events are buggy in Internet Explorer 9, they are not fired when characters are deleted only when inserted.
|
|
||||
<head> <script type="text/javascript"> function Init () { var textarea = document.getElementById ("textarea"); if (textarea.addEventListener) { // all browsers except IE before version 9 textarea.addEventListener ("input", OnInput, false); // Google Chrome and Safari textarea.addEventListener ("textInput", OnTextInput, false); // Internet Explorer from version 9 textarea.addEventListener ("textinput", OnTextInput, false); } if (textarea.attachEvent) { // Internet Explorer and Opera textarea.attachEvent ("onpropertychange", OnPropChanged); // Internet Explorer } } // Google Chrome, Safari and Internet Explorer from version 9 function OnTextInput (event) { alert ("The following text has been entered: " + event.data); } // Firefox, Google Chrome, Opera, Safari from version 5, Internet Explorer from version 9 function OnInput (event) { alert ("The new content: " + event.target.value); } // Internet Explorer function OnPropChanged (event) { if (event.propertyName.toLowerCase () == "value") { alert ("The new content: " + event.srcElement.value); } } </script> </head> <body onload="Init ();"> Please modify the contents of the text field. <textarea id="textarea">Textarea</textarea> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Supported by objects:
HTML elements:
Related pages:
External links:
User Contributed Comments
However "object.addEventListener ("input", handler, useCapture)" does.
"object.bind("input", handler)" works as well if you're using jQuery.