Proper Case

by JonNorman

HTML

<label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>

JavaScript

function forceKeyPressUppercase(e)
  {
    var charInput = e.keyCode;
    if((charInput >= 97) && (charInput <= 122)) { // lowercase
      if(!e.ctrlKey && !e.metaKey && !e.altKey) { // no modifier key
        var newChar = charInput - 32;
        var start = e.target.selectionStart;
        var end = e.target.selectionEnd;
        e.target.value = e.target.value.substring(0, start) + String.fromCharCode(newChar) + e.target.value.substring(end);
        e.target.setSelectionRange(start+1, start+1);
        e.preventDefault();
      }
    }
  }
  document.getElementById("first_name").addEventListener("keypress", function(e) {
    if(this.selectionStart == 0) {
      // uppercase first letter
      forceKeyPressUppercase(e);
    } else {
      // lowercase other letters
      forceKeyPressLowercase(e);
    }
  }, false);