How do I implement onchange of input type text with jQuery

Question

lt select gt  has this API  What about  lt input gt

User · Answer

lt input id  item123  class  firstName  type  text  value  Hello there  data-someattr  CoolExample    gt       firstName   on  change keyup paste   function         var element     this      console log element      var dataAttribute     element  attr  data-someattr       console log  someattr      dataAttribute          I recommend use this keyword in order to get access to the entire element so your are able do everything you need with this element

User · Answer

You can use  change       input name myInput    change function               However  this event will only fire when the selector has lost focus  so you will need to click somewhere else to have this work   If that s not quite right for you  you could use some of the other jQuery events like keyup  keydown or keypress - depending on the exact effect you want

User · Answer

This worked for me  If field with name fieldA is clicked or any key entered it updates field with id fieldB   jQuery  input name  fieldA     on  input   function         jQuery   fieldB   val jQuery this  val

User · Answer

input   change function          alert  Changed

User · Answer

As  pimvdb said in his comment       Note that change will only fire when the input element has lost focus    There is also the input event which fires whenever the textbox updates   without it needing to lose focus  Unlike key events it also works for   pasting dragging text     See documentation    This is so useful  it is worth putting it in an answer   Currently  v1 8    there is no  input   convenience fn in jquery  so the way to do it is      input myTextInput   on  input  function e    alert  Changed

User · Answer

input   keyup function          alert  Changed

User · Answer

Here s the code I use       tbSearch   on  change keyup paste   function          ApplyFilter         function ApplyFilter         var searchString       tbSearch   val                etc        lt input type  text  id  tbSearch  name  tbSearch    gt    This works quite nicely  particularly when paired up with a jqGrid control   You can just type into a textbox and immediately view the results in your jqGrid

User · Answer

You can do this in different ways  keyup is one of them  But i am giving example below with on change       input name  vat id     on  change   function         if   this  val   length    0            alert  Input field is empty                NB  input name  vat id   replace with your input ID or name

User · Answer

I would suggest using the keyup event something like below      elementName   keyup function      alert  Key up detected          There are a few ways of achieving the same result so I guess it s down to preference and depends on how you want it to work exactly   Update  This only works for manual input not copy and paste   For copy and paste I would recommend the following      elementName   on  input  function e       Code here

User · Answer

The following will work even if it is dynamic Ajax calls   Script   jQuery  body   on  keyup   input addressCls  function      console log  working          Html    lt input class  addressCls  type  text  name  address  value    required  gt    I hope this working code will help someone who is trying to access dynamically Ajax calls

User · Answer

You could use  keypress     For example  consider the HTML    lt form gt     lt fieldset gt       lt input id  target  type  text  value  Hello there    gt     lt  fieldset gt   lt  form gt   lt div id  other  gt    Trigger the handler  lt  div gt    The event handler can be bound to the input field       target   keypress function       alert  Handler for  keypress   called           I totally agree with Andy  all depends on how you want it to work

User · Answer

There is one and only one reliable way to do this  and it is by pulling the value in an interval and comparing it to a cached value    The reason why this is the only way is because there are multiple ways to change an input field using various inputs  keyboard  mouse  paste  browser history  voiceinput etc   and you can never detect all of them using standard events in a cross-browser environment   Luckily  thanks to the event infrastructure in jQuery  it   s quite easy to add your own inputchange event  I did so here     event special inputchange         setup  function             var self   this  val            data this   timer   window setInterval function                 val   self value              if     data  self   cache      val                       data  self   cache   val                       self   trigger   inputchange                              20               teardown  function             window clearInterval    data this   timer                 add  function               data this   cache   this value              Use it like     input   on  inputchange   function     console log this value       There is a demo here  http   jsfiddle net LGAWY   If you   re scared of multiple intervals  you can bind unbind this event on focus blur

User · Answer

You could simply work with the id       your id   on  change  function         alert this value

User · Answer

If you want to trigger the event as you type  use the following      input name myInput    on  keyup   function               If you want to trigger the event on leaving the input field  use the following      input name myInput    on  change   function

[jquery] How do I implement onchange of <input type="text"> with jQuery?

Examples related to jquery

Examples related to input

Examples related to onchange