How to get text of an input text box during onKeyPress

Question

I am trying to get the text in a text box as the user types in it  jsfiddle playground     x000D   x000D  function edValueKeyPress     x000D      var edValue   document getElementById  edValue    x000D      var s   edValue value  x000D   x000D      var lblValue   document getElementById  lblValue    x000D      lblValue innerText    The text box contains      s  x000D   x000D        var s       edValue   val    x000D            lblValue   text s       x000D    x000D   lt input id  edValue  type  text  onKeyPress  edValueKeyPress    gt  lt br gt  x000D   lt span id  lblValue  gt The text box contains   lt  span gt  x000D   x000D   x000D      The code runs without errors  except that the value of the input text box  during onKeyPress is always the value before the change        Question  How do I get the text of a text box during onKeyPress    Bonus Chatter  There are three events related to  the user is typing  in the HTML DOM    onKeyDown onKeyPress onKeyUp   In Windows  the order of WM Key messages becomes important when the user holds down a key  and the key begins to repeat    WM KEYDOWN  a   - user has pushed down the A key WM CHAR  a   - an a character has been received from the user WM CHAR  a   - an a character has been received from the user WM CHAR  a   - an a character has been received from the user WM CHAR  a   - an a character has been received from the user WM CHAR  a   - an a character has been received from the user WM KEYUP  a   - the user has released the A key   Will result in five characters appearing in a text control  aaaaa  The important point being that the you respond to the WM CHAR message  the one that repeats  Otherwise you miss events when a key is pressed   In HTML things are slightly different     onKeyDown onKeyPress onKeyDown onKeyPress onKeyDown onKeyPress onKeyDown onKeyPress onKeyDown onKeyPress onKeyUp   Html delivers an KeyDown and KeyPress every key repeat  And the KeyUp event is only raised when the user releases the key   Take aways    I can respond to onKeyDown or onKeyPress  but both are still raised before the input value has been updated I cannot respond to onKeyUp  because it doesn t happen as the text in the text-box changes    Question  How do I get the text of a text-box during onKeyPress   Bonus Reading   Getting a form value with jQuery Get the value in an input text box

User · Accepted Answer

Handling the input event is a consistent solution  it is supported for textarea and input elements in all contemporary browsers and it fires exactly when you need it   x000D   x000D  function edValueKeyPress         var edValue   document getElementById  edValue        var s   edValue value       var lblValue   document getElementById  lblValue        lblValue innerText    The text box contains      s    x000D   lt input id  edValue  type  text  onInput  edValueKeyPress    gt  lt br gt   lt span id  lblValue  gt The text box contains   lt  span gt  x000D   x000D   x000D   I d rewrite this a bit  though   x000D   x000D  function showCurrentValue event        const value   event target value      document getElementById  label   innerText   value    x000D   lt input type  text  onInput  showCurrentValue event   gt  lt br gt  The text box contains   lt span id  label  gt  lt  span gt  x000D   x000D   x000D

User · Answer

There is a better way to do this  Use the concat Method  Example declare a global variable  this works good on angular 10  just pass it to Vanilla JavaScript  Example  HTML  lt input id  quot edValue quot  type  quot text quot  onKeyPress  quot edValueKeyPress  event  quot  gt  lt br gt   lt span id  quot lblValue quot  gt The text box contains   lt  span gt   CODE emptyString       edValueKeyPress   event      this emptyString   this emptyString concat  event key      console log this emptyString

User · Answer

I normally concatenate the field s value  i e  before it s updated  with the key associated with the key event  The following uses recent JS so would need adjusting for support in older IE s   Recent JS example  document querySelector   test   addEventListener  keypress   function evt        var real val   this value   String fromCharCode evt which       if  evt which    8  real val   real val substr 0  real val length - 2       alert real val      false     Support for older IEs example    get field var field   document getElementById  test       bind  somehow if  window addEventListener      field addEventListener  keypress   keypress cb  false   else     field attachEvent  onkeypress   keypress cb      callback function keypress cb evt        evt   evt    window event      var code   evt which    evt keyCode          real val   this value   String fromCharCode code       if  code    8  real val   real val substr 0  real val length - 2        EDIT - this approach  by default  disables key presses for things like back space  CTRL A  The code above accommodates for the former  but would need further tinkering to allow for the latter  and a few other eventualities  See Ian Boyd s comment below

User · Answer

keep it Compact  Each time you press a key  the function edValueKeyPress   is called  You ve also declared and initialized some variables in that function - which slow down the process and requires more CPU and memory as well  You can simply use this code - derived from simple substitution   function edValueKeyPress         document getElementById  lblValue   innerText     document getElementById  edValue   value      That s all you want  and it s faster

User · Answer

easy       In your keyPress event handler  write  void ValidateKeyPressHandler object sender  KeyPressEventArgs e        var tb   sender as TextBox      var startPos   tb SelectionStart      var selLen  tb SelectionLength       var afterEditValue   tb Text Remove startPos  selLen                   Insert startPos  e KeyChar ToString                  more here

User · Answer

lt asp TextBox ID  txtMobile  runat  server  CssClass  form-control  style  width 92    margin 0px 5px 0px 5px   onkeypress  javascript return isNumberKey event    MaxLength  12  gt  lt  asp TextBox gt    lt script gt      function isNumberKey evt            var charCode    evt which    evt which   event keyCode          if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57                 return false                    return true         lt  script gt

User · Answer

So there are advantages and disadvantages to each event   The events onkeypress and onkeydown don t retrieve the latest value  and onkeypress doesn t fire for non-printable characters in some browsers   The onkeyup event doesn t detect when a key is held down for multiple characters   This is a little hacky  but doing something like  function edValueKeyDown input        var s   input value       var lblValue   document getElementById  lblValue        lblValue innerText    The text box contains    s         var s       edValue   val              lblValue   text s            lt input id  edValue  type  text  onkeydown  setTimeout edValueKeyDown  0  this     gt    seems to handle the best of all worlds

User · Answer

Keep it simple  Use both onKeyPress   and onKeyUp      lt input id  edValue  type  text  onKeyPress  edValueKeyPress    onKeyUp  edValueKeyPress    gt    This takes care of getting the most updated string value  after key up  and also updates if the user holds down a key   jsfiddle  http   jsfiddle net VDd6C 8

User · Answer

By using event key we can get values prior entry into HTML Input Text Box  Here is the code     x000D   x000D  function checkText   x000D    x000D    console log  Value Entered which was prevented was -     event key   x000D     x000D      Following will prevent displaying value on textbox x000D      You need to use your validation functions here and return value true or false  x000D    return false  x000D    x000D   lt input type  text  placeholder  Enter Value  onkeypress  return checkText      gt  x000D   x000D   x000D

User · Answer

Try to concatenate the event charCode to the value you get  Here is a sample of my code    lt input type  text  name  price  onkeypress  return  cnum event this    maxlength  10  gt   lt p id  demo  gt  lt  p gt    js   function cnum event  str        var a   event charCode      var ab   str value   String fromCharCode a       document getElementById  demo   innerHTML   ab      The value in ab will get the latest value in the input field

User · Answer

None of the answers so far offer a complete solution   There are quite a few issues to address    Not all keypresses are passed onto keydown and keypress handlers  e g  backspace and delete keys are suppressed by some browsers   Handling keydown is not a good idea   There are situations where a keydown does NOT result in a keypress  setTimeout   style solutions get delayed under Google Chrome Blink web browsers until the user stops typing  Mouse and touch events may be used to perform actions such as cut  copy  and paste   Those events will not trigger keyboard events  The browser  depending on the input method  may not deliver notification that the element has changed until the user navigates away from the field    A more correct solution will handle the keypress  keyup  input  and change events   Example    lt p gt  lt input id  editvalue  type  text  gt  lt  p gt   lt p gt The text box contains   lt span id  labelvalue  gt  lt  span gt  lt  p gt    lt script gt  function UpdateDisplay         var inputelem   document getElementById  editvalue        var s   inputelem value       var labelelem   document getElementById  labelvalue        labelelem innerText   s        Initial update  UpdateDisplay        Register event handlers  var inputelem   document getElementById  editvalue    inputelem addEventListener  keypress   UpdateDisplay   inputelem addEventListener  keyup   UpdateDisplay   inputelem addEventListener  input   UpdateDisplay   inputelem addEventListener  change   UpdateDisplay    lt  script gt    Fiddle   http   jsfiddle net VDd6C 2175   Handling all four events catches all of the edge cases   When working with input from a user  all types of input methods should be considered and cross-browser and cross-device functionality should be verified   The above code has been tested in Firefox  Edge  and Chrome on desktop as well as the mobile devices I own

User · Answer

the value of the input text box  during onKeyPress is always the value before the change   This is on purpose  This allows the event listener to cancel the keypress   If the event listeners cancels the event  the value is not updated  If the event is not canceled  the value is updated  but after the event listener was called   To get the value after the field value has been updated  schedule a function to run on the next event loop  The usual way to do this is to call setTimeout with a timeout of 0       field   keyup function         var  field     this           this is the value before the keypress     var beforeVal    field val         setTimeout function                 this is the value after the keypress         var afterVal    field val           0         Try here  http   jsfiddle net Q57gY 2   Edit  Some browsers  e g  Chrome  do not trigger keypress events for backspace  changed keypress to keyup in code

[javascript] How to get text of an input text box during onKeyPress?

Examples related to javascript

Examples related to html

Examples related to input

Examples related to onkeypress