jQuery Replace whitespace by «-» Not working with <input type="email" />

Question

I have problem for replace whitespace by «-» in no working. Why?

But ein type="text" is working

My Code HTML is simple:

<input type="text" class="demo" placeholder="type=text" /><br /><br />
<input type="email" class="demo" placeholder="type=email" />

My Code jQuery:

$(document).on("keyup",".demo",function(e) {
            
        
    $(this).val($(this).val().replace(/\s+$/g, "-"));

});

My jsFiddle:

https://jsfiddle.net/6qo973vm/11/

Solutions?

Answer 1

Because for an input type email the value text returned is always trimmed you can replace the final space with the desired char.

Updated fiddle here

The snippet:

$(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 + '-';
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<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"/>

Answer 2

I'm yet to really investigate why such an input box behaves that way. While debugging,I also noticed that event.target.value is already trimmed before calling .val(). However, checkout the following snippet maybe you might see something I'm yet to discover. There is a delay that might need fixing too.

$(document).on("keyup", ".demo", function(e) {
  if (this.id === "email") {
    document.getElementById("email").value = document.getElementById("email").value.replace(" ", "-")
  } else {
    $(this).val($(this).val().replace(/\s+$/g, "-"));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Replace whitespace by «-» Not workin in input type email</h1>
<input type="text" class="demo" placeholder="type=text" /><br /><br />
<input type="email" id="email" class="demo" placeholder="type=email" />