Yes. You should store the original title in a variable on page load, then restore it when the input field loses focus (`onblur`).

Yes. `document.title` is a universally supported DOM property in all browsers.
" /> Dynamic Title Appender | Type to Update Tab
Java-Scripts.net

Dynamic Title Appender

Give feedback in the browser tab. This script captures keyboard input and instantly reflects it in the document title, helping users identify specific tabs.

Look at your browser tab/window title!

Current Document Title:

Copy the Script

<script>
function changeTitle(val) {
    if(val == "") {
        document.title = "Default Title";
    } else {
        document.title = val;
    }
}
</script>

<input type="text" onkeyup="changeTitle(this.value)" placeholder="Type here...">

Frequently Asked Questions

No. Search engines index the static `` tag in the HTML source. JavaScript title changes are mostly for user experience after the page loads. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#c2"> Can I restore the original title? </button> </h2> <div id="c2" class="accordion-collapse collapse " data-bs-parent="#faqAccordion"> <div class="accordion-body text-muted small"> Yes. You should store the original title in a variable on page load, then restore it when the input field loses focus (`onblur`). </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#c3"> Does it work in all browsers? </button> </h2> <div id="c3" class="accordion-collapse collapse " data-bs-parent="#faqAccordion"> <div class="accordion-body text-muted small"> Yes. `document.title` is a universally supported DOM property in all browsers. </div> </div> </div> </div> </div> <script> var originalTitle = document.title; function updateTitle(val) { if(val.trim() === "") { document.title = originalTitle; } else { document.title = val; } document.getElementById('titleMirror').innerText = document.title; } // Init mirror document.getElementById('titleMirror').innerText = document.title; function copyCode(btn) { navigator.clipboard.writeText(document.getElementById('codeBlock').innerText); btn.innerText = "Copied!"; } </script> </div> <aside class="col-lg-4"> <div class="sticky-top" style="top: 90px;"> <div class="card border-0 shadow-sm mb-4"> <div class="card-body p-4"> <h3 class="h6 fw-bold text-uppercase text-muted mb-3 border-bottom pb-2"> Forms Scripts </h3> <div class="list-group list-group-flush"> <a href="auto-clear-field.php" class="sidebar-link ">Auto Clear Field</a> <a href="auto-clear-onfocus.php" class="sidebar-link ">Auto Clear on Focus</a> <a href="auto-select-text.php" class="sidebar-link ">Auto Select Text</a> <a href="auto-tab-fields.php" class="sidebar-link ">Auto Tab Fields</a> <a href="auto-text-converter.php" class="sidebar-link ">Auto Text Converter</a> <a href="bandwidth-calculator.php" class="sidebar-link ">Bandwidth Calculator</a> <a href="basic-calculator.php" class="sidebar-link ">Basic Calculator</a> <a href="character-count-limiter.php" class="sidebar-link ">Character Count Limiter</a> <a href="chinese-zodiac-calculator.php" class="sidebar-link ">Chinese Zodiac Calculator</a> <a href="click-to-clear-input.php" class="sidebar-link ">Click to Clear Input</a> <a href="credit-card-payoff-calculator.php" class="sidebar-link ">Credit Card Payoff Calculator</a> <a href="currency-formatter.php" class="sidebar-link ">Currency Formatter</a> <a href="disable-enter-key.php" class="sidebar-link ">Disable Enter Key</a> <a href="dropdown-selection-message.php" class="sidebar-link ">Dropdown Selection Message</a> <a href="dynamic-form-fields.php" class="sidebar-link ">Dynamic Form Fields</a> <a href="dynamic-title-appender.php" class="sidebar-link active">Dynamic Title Appender</a> <a href="editable-dropdown.php" class="sidebar-link ">Editable Dropdown</a> <a href="email-format-verifier.php" class="sidebar-link ">Email Format Verifier</a> <a href="email-validator.php" class="sidebar-link ">Email Validator</a> <a href="fixed-input-prefix.php" class="sidebar-link ">Fixed Input Prefix</a> <a href="form-validator-check.php" class="sidebar-link ">Form Validator Check</a> <a href="geo-coordinates-converter.php" class="sidebar-link ">Geo Coordinates Converter</a> <a href="hex-color-picker.php" class="sidebar-link ">Hex Color Picker</a> <a href="html-code-editor.php" class="sidebar-link ">HTML Code Editor</a> <a href="input-box-restrictions.php" class="sidebar-link ">Input Box Restrictions</a> <a href="list-duplicate-remover.php" class="sidebar-link ">List Duplicate Remover</a> <a href="live-checkboxes.php" class="sidebar-link ">Live Checkboxes (Progress)</a> <a href="matrix-multiplication-tool.php" class="sidebar-link ">Matrix Multiplication Tool</a> <a href="number-formatter.php" class="sidebar-link ">Number Formatter (Commas)</a> <a href="number-guessing-game.php" class="sidebar-link ">Number Guessing Game</a> <a href="reverse-text-converter.php" class="sidebar-link ">Reverse Text Converter</a> <a href="reverse-text-generator.php" class="sidebar-link ">Reverse Text Generator (Flip)</a> <a href="roman-numeral-converter.php" class="sidebar-link ">Roman Numeral Converter</a> <a href="scientific-calculator.php" class="sidebar-link ">Scientific Calculator</a> <a href="select-all-text.php" class="sidebar-link ">Select All Text (Div)</a> <a href="simple-multiplication-calculator.php" class="sidebar-link ">Simple Multiplication Calculator</a> <a href="simple-subtraction-tool.php" class="sidebar-link ">Simple Subtraction Tool</a> <a href="single-selection-validator.php" class="sidebar-link ">Single Selection Validator</a> <a href="text-selection-copier.php" class="sidebar-link ">Text Selection Copier</a> <a href="universal-form-validator.php" class="sidebar-link ">Universal Form Validator</a> <a href="user-input-prompt.php" class="sidebar-link ">User Input Prompt</a> <a href="word-count-validator.php" class="sidebar-link ">Word Count Validator</a> <a href="word-guessing-game.php" class="sidebar-link ">Word Guessing Game</a> </div> <hr> <div class="py-2 text-center"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4013521895230863" data-ad-slot="1543106157" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </aside></div> </main> <footer class="container py-5 border-top text-muted"> <div class="row align-items-center"> <div class="col-md-6">© 2026 <strong>Java-Scripts.net</strong></div> <div class="col-md-6 text-md-end"> <a href="/privacy.phtml" class="text-decoration-none text-muted me-3">Privacy</a> <a href="mailto:info@java-scripts.net" class="text-decoration-none text-muted">Contact</a> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> (function () { let adsLoaded = false; function loadAds() { if (adsLoaded) return; const s = document.createElement("script"); s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4013521895230863"; s.async = true; s.crossOrigin = "anonymous"; document.head.appendChild(s); adsLoaded = true; ["scroll", "mousemove", "keydown", "touchstart"].forEach(evt => window.removeEventListener(evt, loadAds)); } ["scroll", "mousemove", "keydown", "touchstart"].forEach(evt => window.addEventListener(evt, loadAds, { passive: true, once: true })); })(); </script> </body> </html>