JavaScript: Using HTML5 Input Event

The input event can be used to detect any change on input or textarea. It's fired right away, unlike the change event.
This event is great for capturing:

• Keypress (keydown/keyup) from the keyboard.
• Mouse right click ► paste/cut.
• Paste/cut via the keyboard.

So it's like all keypress (keyup and keydown), change, focus, contextmenu, etc. swiftly combined.

We can use the on method or the newer addEventListener for that particular event.

This demo looks like Bing Translator or Google Translate input behavior.
But it's different method there. Maybe.

Let's take a look at the demo below.

---

DEMO
Paste/cut/type any text on each
If you type just [space] it'll show the whitespace. I didn't put something for that.

[input] element output

[textarea] element output

---

This is the HTML elements stacking <div class="outer_wrappo"> <div class="wrappo"> <input type="text" class="in_bar" id="input_text" placeholder="input[type='text']"> </div> <div id="result_1" class="wrappo output"> [input] element output </div> <div class="wrappo"> <textarea id="input_textarea" class="in_bar textarea" rows="1" placeholder="textarea"></textarea> </div> <div id="result_2" class="wrappo output green" > [textarea] element output </div> </div>

---

Then, the CSS (styling) .wrappo, .in_bar { font-family: consolas, monaco, monospace; } .wrappo { text-align: center; margin: 10px 0; } .output, .in_bar { width: 100%; padding: 10px 20px; border-radius: 4px; text-align: center; font-size: 2em; box-sizing: border-box; } .output { max-height: 4em; overflow-x: none; overflow-y: auto; background: khaki; color: #888; } .textarea { resize: none; background: white; box-shadow: none; } .green { background: greenyellow; }

---

The last, the JavaScript var d = document, inp = d.getElementById("input_text"), tex = d.getElementById("input_textarea"), r_1 = d.getElementById("result_1"), r_2 = d.getElementById("result_2"); // *********************************************************** // Function to check nonempty input function check(element, index) { var val; if (!element.value.match(/^$/)) { // if value not empty val = element.value; } else { // if empty value if (index === 0) { val = "[empty input]"; } else { val = "[empty textarea]"; } } return val; } // *********************************************************** // TRIGGERS // The [input] event trigger for input[type='text'] inp.oninput = function() { r_1.innerHTML = check(inp, 0); // go to check function above }; // the [input] event trigger for textarea tex.oninput = function() { r_2.innerHTML = check(tex, 1); // go to check function above };

---

Inline trigger
When using the on method, the trigger can be placed inline within the element, such as:

<input type="text" oninput="the_handler()" placeholder="...**>

Then we need to declare the defined the_handler() function above.

Switching to addEventListener
As I mentioned above, we can also use addEventListener to capture the event.
Look at the example below.

From this:

element.oninput = function() { /*the_handler_function*/ };

Switch the method to this:

element.addEventListener("input", function() {
  /*the_handler_function*/
}, false);

---

Internet Explorer 9 and up support this HTML5 input event. And of course, Chrome, Firefox, Opera, Maxthon, Yandex, etc.

---

References

1. HTML5 input event documentation at Mozilla Developers Network
2. HTML5 input event documentation at IE Dev Center