Prevent 'caret' jumping on focus

Question

So, I'm trying to replicate the html5 'placeholder' attribute functionality.

One thing I'm currently stuck on is, upon focus of an element, the caret immediately appearing at the start of the input.

As it stands, the caret appears in the position that the user clicks and then jumps to the start when I use jQuery to move it.

Look here: http://www.dollmode.com/test - click on the "Desired Username" field and you see what I mean.

Any workarounds?

edit One idea I had was placing an empty input on top of either text or another input. That way, when the user typed into the empty input, the text in the background wouldn't be select-able and it could be hidden upon entering text into the empty input. Is there a cross-browser (back to ie6) to doing this?

Answer 1

I created a <span> and absolutely positioned it behind the relatively positioned <input>. That seems to sort of work. The alignment isn't perfect across the browsers, but complemented by Javascript, this works as a good cross-browser solution. Working on IE6+, Chrome, Opera and FF.

Check out how it works here, if you wish! http://www.dollmode.com/test

If you're viewing this question and that page doesn't exist, it's probably now located on http://www.dollmode.com/

Answer 2

1.You have to remove text inside the textbox when it gets focused

$("input[type=text]").focus(function(){
  $(this).val('');
});

2.Then when focus is lost you have to check whether user filled the textbox so if textbox is empty you should assign its placeholder value

$("input[type=text]").blur(function(){
    if($(this).val()=='') 
           $(this).val()= $(this).attr('title');         
});