Convert first letter to uppercase on input box

Question

JS Bin demo

This regex transform each lower case word to upper case. I have a full name input field. I do want the user to see that each word\'s first letter he/she

Answer 1

You can convert the first letter to Uppercase and still avoid the annoying problem of the cursor jumping to the beginning of the line, by checking the caret position and resetting the caret position. I do this on a form by defining a few functions, one for all Uppercase, one for Proper Case, one for only Initial Uppercase... Then two functions for the Caret Position, one that gets and one that sets:

function ProperCase(el) {
  pos = getInputSelection(el);
  s = $(el).val();
  s = s.toLowerCase().replace(/^(.)|\s(.)|'(.)/g, 
          function($1) { return $1.toUpperCase(); });
  $(el).val(s);
  setCaretPosition(el,pos.start);
}

function UpperCase(el) {
  pos = getInputSelection(el);
  s = $(el).val();
  s = s.toUpperCase();
  $(el).val(s);
  setCaretPosition(el,pos.start);
}

function initialCap(el) {
  pos = getInputSelection(el);
  s = $(el).val();
  s = s.substr(0, 1).toUpperCase() + s.substr(1);
  $(el).val(s);
  setCaretPosition(el,pos.start);
}

/* GETS CARET POSITION */
function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == 'number' && typeof el.selectionEnd == 'number') {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

/* SETS CARET POSITION */
function setCaretPosition(el, caretPos) {

    el.value = el.value;

    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

Then on document ready I apply a keyup event listener to the fields I want to be checked, but I only listen for keys that can actually modify the content of the field (I skip "Shift" key for example...), and if user hits "Esc" I restore the original value of the field...

  $('.updatablefield', $('#myform')).keyup(function(e) {
    myfield=this.id;
    myfieldname=this.name;
    el = document.getElementById(myfield);
    // or the jquery way:
    // el = $(this)[0];
      if (e.keyCode == 27) {                                 // if esc character is pressed
        $('#'+myfield).val(original_field_values[myfield]); // I stored the original value of the fields in an array...
        // if you only need to do the initial letter uppercase, you can apply it here directly like this:
        initialCap(el);
      }                                                    // end if (e.keyCode == 27)
      // if any other character is pressed that will modify the field (letters, numbers, symbols, space, backspace, del...)
      else if (e.keyCode == 8||e.keycode == 32||e.keyCode > 45 && e.keyCode < 91||e.keyCode > 95 && e.keyCode < 112||e.keyCode > 185 && e.keyCode < 223||e.keyCode == 226) {
        // if you only need to do the initial letter uppercase, you can apply it here directly like this:
        initialCap(el);
      } // end else = if any other character is pressed                      //
  }); // end $(document).keyup(function(e)

You can see a working fiddle of this example here: http://jsfiddle.net/ZSDXA/