How to RestrictBlank Spaces In An Input Field In This Javascript?

Question

I believe it's a new request from what I've seen here. I'm using onkeyup() on one input to append and create a new value in a second input. It works great but I want to restrict white/blank spaces in the second input. See pen here

HTML

 <input type="text" id="fullnames" onkeyup="createUsername();" placeholder="Enter Your Full Name">

<!--restrict blank space-->
<input type="text" id="username" placeholder="Username">

Script

    function createUsername() {
    var x = document.getElementById("fullnames").value;
    document.getElementById("username").value= x;
}

Final result

This is how it should be

Full Names : John Doe 
Username : johndoe

Martin Adámek · Accepted Answer · 2017-10-26 20:11:44Z

2

You can use String.prototype.replace and String.prototype.toLowerCase methods:

var name = ' John Doe ';
var username = name.replace(/ /g, '').toLowerCase();

console.log(username);

Btw be aware that there can be more characters that you might want to handle too. For example in my language we can have those in name ěščřžýáíé (plus their upper case variants).

See this gist for more advanced way that can handle those (it does slightly different thing - putting dashes instead of spaces, but its almost the same):

https://gist.github.com/Majkl578/947036

edited Oct 26, 2017 at 20:11

answered Oct 26, 2017 at 20:06

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teju · Accepted Answer · 2017-10-26 20:05:52Z

0

You could try this:

function createUsername() {
    var x = document.getElementById("fullnames").value;
    x = x.trim() // gets rid of leading and trailing spaces
    var username = document.getElementById("username");
    username.value = x;
}

answered Oct 26, 2017 at 20:05

Teju

571 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to RestrictBlank Spaces In An Input Field In This Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related