The HTML oninput event

Event All modern browsers Updated June 22, 2026

Quick answer

The HTML oninput attribute runs JavaScript when the value of an , or contenteditable element changes. It is an inline handler for the <strong>input</strong> event; in modern code prefer <code>addEventListener('input', …)</code>.</p> </div> <nav class="ref-toc" aria-label="On this page"> <span class="ref-toc-title">On this page</span> <ul> <li><a href="#overview">Overview</a></li> <li><a href="#syntax">Syntax</a></li> <li><a href="#examples">Examples</a></li> <li><a href="#best-practices">Best practices</a></li> <li><a href="#faq">FAQ</a></li> <li><a href="#related">Related</a></li> </ul> </nav> <section id="overview" class="ref-section"> <h2>Overview</h2> <div class="ref-prose"><p>The <code>oninput</code> event attribute runs JavaScript every time an input value changes. In JavaScript the event itself is named <code>input</code> — drop the <code>on</code> prefix when you call <code>addEventListener</code>.</p> <p>It is a form-related event, fired by form controls such as <a class="link1" href="https://codeshack.io/references/html/input/"><input></a>, <a class="link1" href="https://codeshack.io/references/html/select/"><select></a> and <a class="link1" href="https://codeshack.io/references/html/textarea/"><textarea></a> (or the <a class="link1" href="https://codeshack.io/references/html/form/"><form></a> itself) as the user interacts with them and as data is submitted or validated.</p> <p>You can wire this up with the inline <code>oninput</code> HTML attribute, but the modern, recommended approach is <code>element.addEventListener('input', handler)</code> in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.</p></div> </section> <section id="syntax" class="ref-section"> <h2>Syntax</h2> <div class="code-block"> <button type="button" class="code-copy" aria-label="Copy code to clipboard"> <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z"/></svg> <span class="code-copy-label">Copy</span> </button> <pre class="m100"><code class="language-html"><element oninput="handler()">…</element> element.addEventListener('input', handler);</code></pre> </div> </section> <section id="examples" class="ref-section"> <h2>Example</h2> <div class="ref-example code-block"> <div class="ref-example-bar"> <span class="ref-example-label"><svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M8 5v14l11-7z"/></svg> Live example</span> <div class="ref-example-actions"> <button type="button" class="code-copy" aria-label="Copy code to clipboard"><svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z"/></svg><span class="code-copy-label">Copy</span></button> <form action="https://codeshack.io/code-editor/" method="post" class="ref-example-editform"> <input type="hidden" name="code" value="PGlucHV0IG9uaW5wdXQ9InRoaXMubmV4dEVsZW1lbnRTaWJsaW5nLnRleHRDb250ZW50ID0gdGhpcy52YWx1ZS5sZW5ndGggKyAnIGNoYXJzJyIgcGxhY2Vob2xkZXI9IlR5cGXigKYiIHN0eWxlPSJwYWRkaW5nOjhweDsiPjxzcGFuPjwvc3Bhbj4="> <input type="hidden" name="type" value="html"> <button type="submit" class="ref-example-edit"><svg width="13" height="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>Edit in editor</button> </form> </div> </div> <div class="ref-example-body"> <div class="ref-example-preview"> <iframe id="example" srcdoc="<!DOCTYPE html><html><head><meta charset="utf-8"><title>Example 1</title></head><body><input oninput="this.nextElementSibling.textContent = this.value.length + ' chars'" placeholder="Type…" style="padding:8px;"><span></span></body></html>" title="CodeShack Preview" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation-by-user-activation" allow="accelerometer *; bluetooth *; camera *; clipboard-read *; clipboard-write *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; serial *; web-share *; xr-spatial-tracking *" allowfullscreen loading="lazy"></iframe> </div> <div class="ref-example-code"> <pre><code class="language-html"><input oninput="this.nextElementSibling.textContent = this.value.length + ' chars'" placeholder="Type…" style="padding:8px;"><span></span></code></pre> </div> </div> </div> </section> <section id="best-practices" class="ref-section"> <h2>Best practices</h2> <ul class="ref-checklist"> <li>Prefer <code>element.addEventListener('input', handler)</code> over the inline <code>oninput</code> attribute — it separates behavior from markup and allows multiple handlers.</li> <li>Use native form validation (<code>required</code>, <code>type</code>, <code>pattern</code>) alongside JavaScript, not instead of it.</li> <li>Re-validate on the server too — client-side events can be bypassed.</li> <li>Give every control a <a class="link1" href="https://codeshack.io/references/html/label/"><label></a> so the interaction is accessible.</li> </ul> </section> <section id="faq" class="ref-section"> <h2>Frequently asked questions</h2> <div class="ref-faq"> <details class="ref-faq-item" open> <summary>What is the oninput event?</summary> <div class="ref-faq-answer">It runs JavaScript every time an input value changes. In JavaScript the event is named <code>input</code>.</div> </details> <details class="ref-faq-item"> <summary>What is the difference between oninput and onchange?</summary> <div class="ref-faq-answer"><a class="link1" href="https://codeshack.io/references/html/oninput/">oninput</a> fires on every keystroke as the value changes; <a class="link1" href="https://codeshack.io/references/html/onchange/">onchange</a> fires once the value is committed (often on blur).</div> </details> <details class="ref-faq-item"> <summary>Should I rely on form events for validation?</summary> <div class="ref-faq-answer">Use them for instant feedback, but always validate again on the server, since client-side checks can be bypassed.</div> </details> <details class="ref-faq-item"> <summary>Should I use the oninput attribute or addEventListener?</summary> <div class="ref-faq-answer">Prefer <code>addEventListener('input', …)</code> in JavaScript. The inline <code>oninput</code> attribute works but mixes behavior into the markup and allows only one handler per element.</div> </details> </div> </section> <section id="related" class="ref-section"> <h2>Related elements</h2> <div class="ref-related"> <a class="ref-related-card" href="https://codeshack.io/references/html/onchange/"> <span class="ref-related-name">onchange</span> <span class="ref-related-desc">Runs JavaScript when a control's value is committed.</span> </a> <a class="ref-related-card" href="https://codeshack.io/references/html/onbeforeinput/"> <span class="ref-related-name">onbeforeinput</span> <span class="ref-related-desc">Runs JavaScript just before editable content changes.</span> </a> <a class="ref-related-card" href="https://codeshack.io/references/html/onkeydown/"> <span class="ref-related-name">onkeydown</span> <span class="ref-related-desc">Runs JavaScript when a key is pressed down.</span> </a> </div> </section> <div class="ref-nav mar-bot-5"> <a class="reference-btn" href="https://codeshack.io/references/html/onhashchange/"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" class="pad-right-2"><path d="M25.4 278.6L2.7 256l22.6-22.6 144-144L192 66.7 237.2 112l-22.6 22.6L125.2 224 416 224l32 0 0 64-32 0-290.7 0 89.4 89.4L237.2 400 192 445.3l-22.6-22.6-144-144z"/></svg> onhashchange</a> <a class="reference-btn" href="https://codeshack.io/references/html/oninvalid/">oninvalid <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" class="pad-left-2"><path d="M422.6 278.6L445.3 256l-22.6-22.6-144-144L256 66.7 210.8 112l22.6 22.6L322.8 224 32 224 0 224l0 64 32 0 290.7 0-89.4 89.4L210.8 400 256 445.3l22.6-22.6 144-144z"/></svg></a> </div> </article> </div> <aside class="ref-left m100" aria-label="HTML reference navigation"> <span class="ref-left-title">Browse HTML</span> <div class="ref-filter"> <svg viewBox="0 0 512 512" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> <input type="text" id="ref-filter-input" placeholder="Filter HTML…" aria-label="Filter references" autocomplete="off"> </div> <div class="ref-nav-list" id="ref-nav-list"> <div class="ref-list"> <input id="tags" type="checkbox"> <label for="tags"><span class="ref-cat-name">Elements</span><span class="ref-cat-count">118</span></label> <div> <a class="ref-cat-all" href="https://codeshack.io/references/html/elements/">All Elements</a> <a href="https://codeshack.io/references/html/!--/" data-name="!--"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></a> <a target="_blank" href="https://twitter.com/codeshackio" aria-label="X (Twitter)" title="X (Twitter)" class="tw" rel="noopener"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512" fill="#ffffff"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></a> <a target="_blank" href="https://www.facebook.com/codeshackio/" aria-label="Facebook" title="Facebook" class="fb" rel="noopener"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 320 512" fill="#ffffff"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></a> </div> </div> </div> </footer> <script>const DEFAULT_URL = "https://codeshack.io/";</script> <script> document.addEventListener('DOMContentLoaded', () => { const themeToggle = document.getElementById('theme-toggle'); if (!themeToggle) return; themeToggle.addEventListener('click', () => { const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || (!document.documentElement.getAttribute('data-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches); const newTheme = isDark ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); }); }); </script> <script src="https://codeshack.io/web/js/script.min.js?v=10.7.4"></script> <script> (function() { if (!isMobile()) { const d = document, s = d.createElement('script'); s.src = 'https://codeshack.io/web/js/codesyntaxhighlight.js?v=10.7.4'; s.setAttribute('defer', 'defer'); (d.head || d.body).appendChild(s); } })(); </script> <script> document.addEventListener('click', function(e) { const btn = e.target.closest('.code-copy'); if (!btn) return; const wrap = btn.closest('.code-block'); const code = wrap ? wrap.querySelector('pre') : null; if (!code) return; navigator.clipboard.writeText(code.innerText).then(function() { btn.classList.add('copied'); const label = btn.querySelector('.code-copy-label'); const prev = label ? label.textContent : ''; if (label) label.textContent = 'Copied!'; setTimeout(function() { btn.classList.remove('copied'); if (label) label.textContent = prev; }, 1800); }); }); </script> <script> (function() { var input = document.getElementById('ref-filter-input'); var list = document.getElementById('ref-nav-list'); var empty = document.getElementById('ref-filter-empty'); if (!input || !list) return; var groups = Array.prototype.slice.call(list.querySelectorAll('.ref-list')); input.addEventListener('input', function() { var q = input.value.trim().toLowerCase(); var filtering = q.length > 0; list.classList.toggle('filtering', filtering); var totalVisible = 0; groups.forEach(function(g) { var visible = 0; g.querySelectorAll('a[data-name]').forEach(function(a) { var match = !filtering || a.getAttribute('data-name').indexOf(q) !== -1; a.style.display = match ? '' : 'none'; if (match) visible++; }); var all = g.querySelector('.ref-cat-all'); if (all) all.style.display = filtering ? 'none' : ''; g.style.display = (filtering && visible === 0) ? 'none' : ''; totalVisible += visible; }); if (empty) empty.hidden = !(filtering && totalVisible === 0); }); })(); </script> </body> </html>