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

Question

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?

Be careful of just listening for keyboard events. Remember that a user can cut from and paste to the field using a pointing device. — Alohci
– Alohci, Commented Nov 19, 2012 at 13:02
@Alohci well thats a really good point! But fortunatelly, users have almost no way to copy it in my app :) and the whole mouse-listening thing is the whole issue itself :) — jave.web
– jave.web, Commented Apr 30, 2013 at 7:34

Jan Hančič · Accepted Answer · 2012-11-19 10:43:54Z

10

Use onkeyup instead of onchange then.

edited Nov 19, 2012 at 10:43

Jan Hančič

54k17 gold badges99 silver badges101 bronze badges

answered Nov 19, 2012 at 10:43

mabako

1,18311 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jave.web Over a year ago

YEAH ! That was EXACTLY what I was looking for! Thanks a lot! BTW: I knew this event but I really didnt expect it to act like that in a text field :-O Thanks a lot again :)

ameya rote · Accepted Answer · 2012-11-19 11:34:21Z

4

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.

edited Nov 19, 2012 at 11:34

answered Nov 19, 2012 at 10:49

ameya rote

1,1121 gold badge9 silver badges13 bronze badges

Comments

yan.kun · Accepted Answer · 2012-11-19 10:44:57Z

1

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

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

answered Nov 19, 2012 at 10:44

yan.kun

6,9182 gold badges32 silver badges41 bronze badges

Comments

int32_t · Accepted Answer · 2012-11-20 03:50:49Z

0

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

answered Nov 20, 2012 at 3:50

int32_t

6,2102 gold badges25 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related