'How to make a real "onchange" event in HTML (no jQuery)?

Please note: I do not want to use jQuery for this (otherwise I like it)

Problem: I have come to situation where I need to do some javascript function after an user changes an input field (e.g. input type="text"). So I said to myself - I remember an onchange event - BUT onchange event runs AFTER user leaves the field, but I need the function to be called for example every time user types a character to that field. Wowhead shows nice example of what I am trying to achieve this (field with placeholder "Search within results...")

Summary: I am looking for a SIMPLE way of detecting REAL onchange event(not the classic HTML one)and through that call a JS function while not using jQuery?

javascripthtmlformsdom-events


Solution 1:[1]

Following is a simple way of invoking each type of Key Press on field.

input type="text" onkeypress="myFunction()

Get Example here

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress

Enjoy..

you can also use onkeyup and onkeydown instead of onkeypress.

Solution 2:[2]

Use onkeyup instead of onchange then.

Solution 3:[3]

Tried onkeypress="myFunction()" or onkeyup="myFunction()"?

There are also events for onfocus and onblur for entering and leaving a textfield :)

Solution 4:[4]

You should use "input" event. keyup and keypress don't work if a user modified the value only by a mouse.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jan Hančič
Solution 3 yan.kun
Solution 4 int32_t

Related Questions