title: How to get text of an input text box during onKeyPress?
body: <p>I am trying to get the text in a text box as the user types in it (<a href="http://jsfiddle.net/VDd6C/3/" rel="noreferrer">jsfiddle playground</a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function edValueKeyPress() {
      var edValue = document.getElementById("edValue");
      var s = edValue.value;
  
      var lblValue = document.getElementById("lblValue");
      lblValue.innerText = "The text box contains: " + s;
  
      //var s = $("#edValue").val();
      //$("#lblValue").text(s);    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="edValue" type="text" onKeyPress="edValueKeyPress()"&gt;&lt;br&gt;
  &lt;span id="lblValue"&gt;The text box contains: &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>​
  The code runs without errors, except that the <strong><em>value</em></strong> of the <code>input text</code> box, during <code>onKeyPress</code> is always the value <em>before</em> the change:</p>
  
  <p><img src="https://i.stack.imgur.com/x8DkU.png" alt="enter image description here"></p>
  
  <blockquote>
    <p><strong>Question</strong>: How do I get the text of a text box during <code>onKeyPress</code>?</p>
  </blockquote>
  
  <h2>Bonus Chatter</h2>
  
  <p>There are three events related to <em>"the user is typing"</em> in the HTML DOM:</p>
  
  <ul>
  <li><code>onKeyDown</code></li>
  <li><code>onKeyPress</code></li>
  <li><code>onKeyUp</code></li>
  </ul>
  
  <p>In <strong>Windows</strong>, the order of <code>WM_Key</code> messages becomes important when the user holds down a key, and the key begins to repeat:</p>
  
  <ul>
  <li><code>WM_KEYDOWN('a')</code> - user has pushed down the <kbd>A</kbd> key</li>
  <li><code>WM_CHAR('a')</code> - an <code>a</code> character has been received from the user</li>
  <li><code>WM_CHAR('a')</code> - an <code>a</code> character has been received from the user</li>
  <li><code>WM_CHAR('a')</code> - an <code>a</code> character has been received from the user</li>
  <li><code>WM_CHAR('a')</code> - an <code>a</code> character has been received from the user</li>
  <li><code>WM_CHAR('a')</code> - an <code>a</code> character has been received from the user</li>
  <li><code>WM_KEYUP('a')</code> - the user has released the <kbd>A</kbd> key</li>
  </ul>
  
  <p>Will result in five characters appearing in a text control: <code>aaaaa</code></p>
  
  <p>The important point being that the you respond to the <code>WM_CHAR</code> message, the one that repeats. Otherwise you miss events when a key is pressed.</p>
  
  <p>In <strong>HTML</strong> things are slightly different: </p>
  
  <ul>
  <li><code>onKeyDown</code></li>
  <li><code>onKeyPress</code></li>
  <li><code>onKeyDown</code></li>
  <li><code>onKeyPress</code></li>
  <li><code>onKeyDown</code></li>
  <li><code>onKeyPress</code></li>
  <li><code>onKeyDown</code></li>
  <li><code>onKeyPress</code></li>
  <li><code>onKeyDown</code></li>
  <li><code>onKeyPress</code></li>
  <li><code>onKeyUp</code></li>
  </ul>
  
  <p>Html delivers an <code>KeyDown</code> and <code>KeyPress</code> every key repeat. And the <code>KeyUp</code> event is only raised when the user releases the key.</p>
  
  <p><strong>Take aways</strong> </p>
  
  <ul>
  <li>I <strong>can</strong> respond to <code>onKeyDown</code> or <code>onKeyPress</code>, but both are still raised before the <code>input.value</code> has been updated</li>
  <li>I cannot respond to <code>onKeyUp</code>, because it doesn't happen as the text in the text-box changes.</li>
  </ul>
  
  <p><strong>Question:</strong> How do I get the text of a text-box during <code>onKeyPress</code>?</p>
  
  <h2>Bonus Reading</h2>
  
  <ul>
  <li><a href="http://www.electrictoolbox.com/jquery-get-set-form-values/" rel="noreferrer">Getting a form value with jQuery</a></li>
  <li><a href="https://stackoverflow.com/questions/4088467/jquery-get-value-in-input-text-box">Get the value in an input text box</a></li>
  </ul>