In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > textInput

textInput event

Browser support:

9

Occurs when some characters are entered into an element.

Note: The textInput event is supported in Internet Explorer from version 9.

This event is supported by the input:password, input:search, input:text and textarea elements, and by elements in contentEditable mode.

To retrieve the entered text, use the data property of the event object.

The oninput event is similar to the textInput event and is supported by Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9. You can use it instead of the textInput event.
Note: the oninput event is not fired on textarea elements in Safari before version 5.

The textInput event is supported by Internet Explorer from version 9, but in lower-case (textinput). If you would like to receive a notification immediately after the modification in older Internet Explorer versions, use the onpropertychange event.

Another similar event is the cross-browser onchange event, but it occurs after the element loses the focus, not immediately after the modification.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

object.addEventListener ("textInput", handler, useCapture);

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	Yes
Cancelable	Yes
Event object	TextEvent

Actions that invoke the textInput event:

Entering some text into an element.

Actions that do not invoke the textInput event:

Cutting, deleting, pasting or dropping some content into the element or changing the contents from JavaScript.

The order of events related to the textInput event:

Action	Event order
Entering some text into an element.	onkeydown onkeypress textInput onkeyup

Example HTML code 1:

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>