JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Replace whitespace by «-» Not workin in input type email</h1>
<input type="text" class="demo" placeholder="type=text" /><br /><br />
<input type="email" class="demo" placeholder="type=email" />

JavaScript

$(document).on("keyup", ".demo", function (e) {
    if (e.keyCode == 32) {  // in case of space...
        if (this.value.indexOf(' ') != -1) { // if the space is inside string
            this.value = this.value.replace(/\s+/g, "-");
        } else {  // for type = email: the space is at the end: add a final char.....
            this.value = this.value + '-';
        }
    }
});