Moving Caret to start when focused

Question

I'm trying to replicate a facebook like comments section bevaviour so when a user wants to add a new comment the text color is fading and the caret is at the begenning of the new massage. I'm using this code:

var inp = document.getElementsByTagName('input')[1];
if (inp.createTextRange) {
    var part = inp.createTextRange();
    part.move("character", 1);
    part.select();
} else if (inp.setSelectionRange){
    inp.setSelectionRange(1, 1);
}

and it seems to work but when I try to put it inside a Jquery selector like this:

$("#massages_body input").focus(function(){ 
  $(this).css('color', 'rgba(128,128,128,0.4)');
  if ($(this).createTextRange) {
      var part = $(this).createTextRange();
      part.move("character", 1);
      part.select();
  } else if ($(this).setSelectionRange){
      $(this).setSelectionRange(1, 1);
  } 
});

it doest'nt work at all. I'm sure i'm using Jquery or Javascript wrong here but I can't find the problem. Thanks for your help!

Answer 1

What I believing you are thinking of is Facebook's use of form input placeholders which are a part of the HTML5 spec and supported by all major and modern browsers.

You can use this library to reproduce that effect for legacy browsers as well: Placeholders.js