Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The event handler only sees the content before the change is applied, because the <code>mousedown</code> and <code>input</code> events give you a chance to block the event before it gets to the field.</p> <p>You can work around this limitation by giving the browser a chance to update the field's contents before grabbing its value - the simplest way is to use a small timeout before checking the value.</p> <p>A minimal example is:</p> <pre><code>&lt;input id="e" onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)" type="text" value="cow" /&gt; </code></pre> <p>This sets a 1ms timeout that should happen after the keypress and keydown handlers have let the control change its value. If your monitor is refreshing at 60fps then you've got 16ms of wiggle room before it lags 2 frames.</p> <hr> <p>A more complete example (which doesn't rely on <a href="https://html.spec.whatwg.org/multipage/browsers.html#named-access-on-the-window-object" rel="nofollow noreferrer">named access on the Window object</a> would look like:</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>var e = document.getElementById('e'); var out = document.getElementById('out'); e.addEventListener('input', function(event) { window.setTimeout(function() { out.value = event.target.value; }, 1); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="e" value="cow"&gt; &lt;input type="text" id="out" readonly&gt;</code></pre> </div> </div> </p> <p>When you run the above snippet, try some of the following:</p> <ul> <li>Put the cursor at the start and type</li> <li>Paste some content in the middle of the text box</li> <li>Select a bunch of text and type to replace it</li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload