html input type text onchange event not working

Question

I am trying to do some experiment  What I want to happen is that everytime the user types in something in the textbox  it will be displayed in a dialog box  I used the onchange event property to make it happen but it doesn t work  I still need to press the submit button to make it work  I read about AJAX and I am thinking to learn about this  Do I still need AJAX to make it work or is simple JavaScript enough  Please help   index php   lt script type  text javascript  src  javascript js  gt   lt  script gt    lt form action  index php  method  get  gt   Integer 1   lt input type  text  id  num1  name  num1  onchange  checkInput  num1       gt   lt br   gt   Integer 2   lt input type  text  id  num2  name  num2  onchange  checkInput  num2       gt   lt br   gt    lt input type  submit  value  Compute    gt   lt  form gt    javascript js  function checkInput textbox     var textInput   document getElementById textbox  value    alert textInput

User · Answer

Firstly  what  doesn t work   Do you not see the alert   Also  Your code could be simplified to this   lt input type  text  id  num1  name  num1  onkeydown  checkInput this      gt   lt br   gt   function checkInput obj        alert obj value

User · Answer

It is better to use onchange event  with  lt select gt   With  lt input gt  you can use below event   - onkeyup event  - onkeydown event  - onkeypress event

User · Answer

onkeyup worked for me  onkeypress doesn t trigger when pressing back space

User · Answer

try onpropertychange   it only works for IE

User · Answer

onchange only occurs when the change to the input element is committed by the user  most of the time this is when the element loses focus   if you want your function to fire everytime the element value changes you should use the oninput event - this is better than the key up down events as the value can be changed with the user s mouse ie pasted in  or auto-fill etc  Read more about the change event here  Read more about the input event here

User · Answer

Checking for keystrokes is only a partial solution  because it s possible to change the contents of an input field using mouse clicks  If you right-click into a text field you ll have cut and paste options that you can use to change the value without making a keystroke  Likewise  if autocomplete is enabled then you can left-click into a field and get a dropdown of previously entered text  and you can select from among your choices using a mouse click  Keystroke trapping will not detect either of these types of changes   Sadly  there is no  onchange  event that reports changes immediately  at least as far as I know  But there is a solution that works for all cases  set up a timing event using setInterval     Let s say that your input field has an id and name of  city     lt input type  text  name  city  id  city    gt    Have a global variable named  city    var city         Add this to your page initialization   setInterval lookForCityChange  100     Then define a lookForCityChange   function   function lookForCityChange         var newCity   document getElementById  city   value      if  newCity    city            city   newCity          doSomething city          do whatever you need to do           In this example  the value of  city  is checked every 100 milliseconds  which you can adjust according to your needs  If you like  use an anonymous function instead of defining lookForCityChange    Be aware that your code or even the browser might provide an initial value for the input field so you might be notified of a  change  before the user does anything  adjust your code as necessary   If the idea of a timing event going off every tenth of a second seems ungainly  you can initiate the timer when the input field receives the focus and terminate it  with clearInterval    upon a blur  I don t think it s possible to change the value of an input field without its receiving the focus  so turning the timer on and off in this fashion should be safe

User · Answer

Use  on  input     to monitor every change to an input  paste  keyup  etc  from jQuery 1 7 and above   For static and dynamic inputs     document  on  input     my-class   function        alert  Input changed          For static inputs only       my-class   on  input   function        alert  Input changed          JSFiddle with static dynamic example  https   jsfiddle net op0zqrgy 7

User · Answer

I encountered issues where Safari wasn t firing  onchange  events on a text input field  I used a jQuery 1 7 2  change  event and it didn t work either  I ended up using ZURB s textchange event   It works with mouseevents and can fire without leaving the field  http   www zurb com playground jquery-text-change-custom-event      inputClassToBind   bind  textchange   function  event  previousText        alert   this  attr  id

User · Answer

A couple of comments that IMO are important     input elements not not emitting  change  event until USER action ENTER or blur await IS the correct behavior  The event you want to use is  input    oninput    Here is well demonstrated the different between the two  https   javascript info events-change-input The two events signal two different user gestures moments   input  event means user is writing or navigating a select list options  but still didn t confirm the change   change  means user did changed the value  with an enter or blur our  Listening for key events like many here recommended is a bad practice in this case   like people modifying the default behavior of ENTER on inputs     jQuery has nothing to do with this  This is all in HTML standard   If you have problems understanding WHY this is the correct behavior  perhaps is helpful  as  experiment  use your text editor or browser without a mouse pad  just a keyboard    My two cents

User · Answer

onchange is only triggered when the control is blurred  Try onkeypress instead

User · Answer

use following events instead of  onchange   - onkeyup event  - onkeydown event  - onkeypress event

User · Answer

HTML5 defines an oninput event to catch all direct changes  it works for me

[javascript] html <input type="text" /> onchange event not working

Examples related to javascript

Examples related to dom-events