Search code examples
javascripthtmldynamicpage-title

Change HTML title dynamically

I'm currently making a page that updates HTML title based on user input.

<html>
    <head>
        <title>Page Title</title>
    </head>

    <body>
        <input type='text' placeholder='Your title...' />
    </body>

    <script>
        var inp = document.querySelector( 'input' );
        inp.addEventListener( 'keyup', evt => document.title = evt.target.value );
    </script>
</html>

But, the JavaScript ignores multiple spaces and replaces them by a single one.

Even, if I do document.title = 'Far &nbsp; &nbsp; Apart', it does the same thing.

Since multiple spaces are allowed in HTML title, then why is it so in JavaScript? And, how do I do it correctly?

Solution

  • &nbsp; would be recognized as a string itself in JS. You can use the \xa0 character.

    document.title = 'Far\xa0\xa0Apart'