How to get the new value of an HTML input after a keypress has modified it

Question

I have an HTML input box   lt input type  text  id  foo  value  bar  gt    I ve attached a handler for the  keyup  event  but if I retrieve the current value of the input box during the event handler  I get the value as it was  and not as it will be   I ve tried picking up  keypress  and  change  events  same problem    I m sure this is simple to solve  but at present I think the only solution is for me to use a short timeout to trigger some code a few milliseconds in the future   Is there anyway to obtain the current value during those events   EDIT  looks like I had a caching problem with my js file as I checked the same code later on and it worked just fine  I would delete the question  but not sure if that loses rep for the kind folk who posted ideas

User · Answer

Here is a table of the different events and the levels of browser support. You need to pick an event which is supported across at least all modern browsers.

As you will see from the table, the keypress and change event do not have uniform support whereas the keyup event does.

Also make sure you attach the event handler using a cross-browser-compatible method...

User · Answer

lt html gt       lt head gt           lt script gt          function callme field                alert  field     field value                      lt  script gt       lt  head gt       lt body gt           lt form name  f1  gt               lt input type  text  onkeyup  callme this    name  text1  gt           lt  form gt       lt  body gt   lt  html gt    It looks like you can use the onkeyup to get the new value of the HTML input control   Hope it helps

User · Answer

Can you post your code  I m not finding any issue with this  Tested on Firefox 3 01 safari 3 1 2 with   function showMe e       i am spammy    alert e value           lt input type  text  id  foo  value  bar  onkeyup  showMe this     gt

User · Answer

lt html gt       lt head gt           lt script gt          function callme field                alert  field     field value                      lt  script gt       lt  head gt       lt body gt           lt form name  f1  gt               lt input type  text  onkeyup  callme this    name  text1  gt           lt  form gt       lt  body gt   lt  html gt    It looks like you can use the onkeyup to get the new value of the HTML input control   Hope it helps

User · Answer

Here is a table of the different events and the levels of browser support. You need to pick an event which is supported across at least all modern browsers.

As you will see from the table, the keypress and change event do not have uniform support whereas the keyup event does.

Also make sure you attach the event handler using a cross-browser-compatible method...

User · Answer

Can you post your code  I m not finding any issue with this  Tested on Firefox 3 01 safari 3 1 2 with   function showMe e       i am spammy    alert e value           lt input type  text  id  foo  value  bar  onkeyup  showMe this     gt

User · Answer

Can you post your code  I m not finding any issue with this  Tested on Firefox 3 01 safari 3 1 2 with   function showMe e       i am spammy    alert e value           lt input type  text  id  foo  value  bar  onkeyup  showMe this     gt

User · Answer

Can you post your code  I m not finding any issue with this  Tested on Firefox 3 01 safari 3 1 2 with   function showMe e       i am spammy    alert e value           lt input type  text  id  foo  value  bar  onkeyup  showMe this     gt

User · Answer

You can try this code  requires jQuery     lt html gt   lt head gt       lt script type  text javascript  src  jquery js  gt  lt  script gt       lt script type  text javascript  gt            document  ready function                     foo   keyup function e                    var v       foo   val                        debug   val v                                   lt  script gt   lt  head gt   lt body gt       lt form gt           lt input type  text  id  foo  value  bar  gt  lt br gt           lt textarea id  debug  gt  lt  textarea gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

There are two kinds of input value  field s property and field s html attribute   If you use keyup event and field value you shuld get current value of the field   It s not the case when you use field getAttribute  value   which would return what s in the html attribute  value      The property represents what s been typed into the field and changes as you type  while attribute doesn t change automatically  you can change it using field setAttribute method

User · Answer

To give a modern approach to this question  This works well  including Ctrl v  GlobalEventHandlers oninput   var onChange   function evt      console info this value        or   console info evt target value      var input   document getElementById  some-id    input addEventListener  input   onChange  false

User · Answer

Here is a table of the different events and the levels of browser support. You need to pick an event which is supported across at least all modern browsers.

As you will see from the table, the keypress and change event do not have uniform support whereas the keyup event does.

Also make sure you attach the event handler using a cross-browser-compatible method...

User · Answer

To give a modern approach to this question  This works well  including Ctrl v  GlobalEventHandlers oninput   var onChange   function evt      console info this value        or   console info evt target value      var input   document getElementById  some-id    input addEventListener  input   onChange  false

User · Answer

There are two kinds of input value  field s property and field s html attribute   If you use keyup event and field value you shuld get current value of the field   It s not the case when you use field getAttribute  value   which would return what s in the html attribute  value      The property represents what s been typed into the field and changes as you type  while attribute doesn t change automatically  you can change it using field setAttribute method

User · Answer

You can try this code  requires jQuery     lt html gt   lt head gt       lt script type  text javascript  src  jquery js  gt  lt  script gt       lt script type  text javascript  gt            document  ready function                     foo   keyup function e                    var v       foo   val                        debug   val v                                   lt  script gt   lt  head gt   lt body gt       lt form gt           lt input type  text  id  foo  value  bar  gt  lt br gt           lt textarea id  debug  gt  lt  textarea gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

Here is a table of the different events and the levels of browser support. You need to pick an event which is supported across at least all modern browsers.

As you will see from the table, the keypress and change event do not have uniform support whereas the keyup event does.

Also make sure you attach the event handler using a cross-browser-compatible method...

User · Answer

lt html gt       lt head gt           lt script gt          function callme field                alert  field     field value                      lt  script gt       lt  head gt       lt body gt           lt form name  f1  gt               lt input type  text  onkeyup  callme this    name  text1  gt           lt  form gt       lt  body gt   lt  html gt    It looks like you can use the onkeyup to get the new value of the HTML input control   Hope it helps

User · Answer

lt html gt       lt head gt           lt script gt          function callme field                alert  field     field value                      lt  script gt       lt  head gt       lt body gt           lt form name  f1  gt               lt input type  text  onkeyup  callme this    name  text1  gt           lt  form gt       lt  body gt   lt  html gt    It looks like you can use the onkeyup to get the new value of the HTML input control   Hope it helps

User · Answer

You can try this code  requires jQuery     lt html gt   lt head gt       lt script type  text javascript  src  jquery js  gt  lt  script gt       lt script type  text javascript  gt            document  ready function                     foo   keyup function e                    var v       foo   val                        debug   val v                                   lt  script gt   lt  head gt   lt body gt       lt form gt           lt input type  text  id  foo  value  bar  gt  lt br gt           lt textarea id  debug  gt  lt  textarea gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

There are two kinds of input value  field s property and field s html attribute   If you use keyup event and field value you shuld get current value of the field   It s not the case when you use field getAttribute  value   which would return what s in the html attribute  value      The property represents what s been typed into the field and changes as you type  while attribute doesn t change automatically  you can change it using field setAttribute method

User · Answer

You can try this code  requires jQuery     lt html gt   lt head gt       lt script type  text javascript  src  jquery js  gt  lt  script gt       lt script type  text javascript  gt            document  ready function                     foo   keyup function e                    var v       foo   val                        debug   val v                                   lt  script gt   lt  head gt   lt body gt       lt form gt           lt input type  text  id  foo  value  bar  gt  lt br gt           lt textarea id  debug  gt  lt  textarea gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

There are two kinds of input value  field s property and field s html attribute   If you use keyup event and field value you shuld get current value of the field   It s not the case when you use field getAttribute  value   which would return what s in the html attribute  value      The property represents what s been typed into the field and changes as you type  while attribute doesn t change automatically  you can change it using field setAttribute method

[javascript] How to get the new value of an HTML input after a keypress has modified it?

Examples related to javascript

Examples related to html

Examples related to dom