JSFiddle - React, Tailwind, and code Playground

by omni5cience

HTML

<h1>white-space: nowrap; does funny things to a &lt;textarea&gt;</h1>
<p>Note the nonbreaking spaces in place of regular spaces at the beginning and end of lines. They seem to not get replaced if you paste text afterwards instead of typing.</p>
<textarea id="textarea" placeholder="Type here"></textarea>

<div>HTML encoded:</div>
<div id="html_output"></div>

<div>URL encoded:</div>
<div id="url_output"></div>

CSS

textarea {
    white-space: nowrap;
    width: 100%;
}

JavaScript

textarea.onchange = textarea.onkeyup = textarea.onpaste = function () {
    var val = encodeURIComponent(this.value);
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(this.value));
    
    html_output.textContent = div.innerHTML;
    url_output.textContent = val;
    
    if (val.indexOf("%C2%A0") >= 0) 
        url_output.style.background =
        html_output.style.background = "red";
    else url_output.style.background = 
        html_output.style.background = "";
}