How To Change A Form Input Text To Uppercase Using A Javascript Function

I'm trying to change a form input field (username) to uppercase and to remove all spaces within the text. I know there are a few ways one could do this but I need to figure out how

Solution 1:

You can try this:

onkeyup="changeToUpperCase(this)"

Then in the script:

functionchangeToUpperCase(el)
 {
     el.value =el.value.trim().toUpperCase();
 }

Solution 2:

I'd change the html to this:

onkeyup="changeToUpperCase(this)"

And adjust the function to this

functionchangeToUpperCase(t) {
   var eleVal = document.getElementById(t.id);
   eleVal.value= eleVal.value.toUpperCase().replace(/ /g,'');
}

Example

Solution 3:

functionchangeToUpperCase() {
    document.getElementById("username").value = document.getElementById("username").value.toUpperCase().replace(" ", "")
}

Example here: http://jsfiddle.net/haxtbh/DDrCc/

Solution 4:

You could try using this:

('text with spaces').replace(" ", "");

Solution 5:

Something like this:

functiontrimAndUpper(id){
    var element = document.getElementById(id);
    element.value= element.value.trim().toUpperCase();
}

Add the trim function to a String:

String.prototype.trim = function () {
    returnthis.replace(/^\s+|\s+$/g, '');
  };

Usage: FIDDLE

BTW using str.Replace isn't good. This will replace the first occurance only.