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

textInput event

A A

Font size

Browser support:

Occurs when some characters are entered into an element.

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 and Safari. You can use it instead of the textInput event.
Note: the oninput event is not supported for textarea elements in Safari, use the textInput event for those elements.

Another similar event is the cross-browser onchange event, but it occurs after the element loses the focus, not immediately after the modification. If you would like to receive a notification immediately after the modification, use the onpropertychange event in Internet Explorer.

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
Type	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 illustrates the use of the textInput event.

<head>
    <script>
        function Init () {
            var textarea = document.getElementById ("textarea");
            if (textarea.addEventListener) {    // Firefox, Opera and Safari
                textarea.addEventListener ('textInput', OnTextInput, false);    // Safari
            }
        }

            // Safari
        function OnTextInput (event) {
            alert ("The following text is entered: " + event.data);
        }
            // Firefox, Opera
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
            // Internet Explorer
        function OnPropChanged () {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
        
    </script>
</head>
<body onload="Init ();">
    Enter some characters into the textarea!
    <textarea id="textarea" oninput="OnInput (event)" onpropertychange="OnPropChanged ()">Textarea</textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

onchange
oninput
onpropertychange
initTextEvent

External links:

textInput (W3C)

Digg

Del.icio.us

Facebook

Twitter

Diigo

User Contributed Comments