Question

I am trying to mimic twitter bootstrap’s text input behavior. I noticed in Twitter Bootstrap’s inputs the cursor always stays at the beginning of the text input when a user clicks there. But the “Search” text doesn’t disappear until the user starts typing.

I’ve got most of it working except for me the cursor doesn’t stay at the beginning of the text input. Any ideas how I could achieve this?

Here’s my jQuery code so far:

$('input[title]').each(function() {
    if($(this).val() === '') {
        $(this).val($(this).attr('title'));
    }
    $(this).keydown(function() {
        if($(this).val() == $(this).attr('title')) {
            $(this).val('').removeClass('blur');
        }
    });
    $(this).mousedown(function() {
        if($(this).val() == $(this).attr('title')) {
            $(this).blur().val('');
            $(this).focus().val($(this).attr('title'));
        }
    });
    $(this).blur(function() {
        if($(this).val() === '') {
            $(this).val($(this).attr('title')).addClass('blur');
        }
    });
});

Answer 1

This will surely help you: http://jsbin.com/ohoyer/2/edit

jQuery(function ($) {
       var $inputExample = $('#input-ex');
       var a = false;
       $inputExample.click(function () {
         $inputExample.caretToStart();
       });

       $inputExample.keypress(function(){
       if(a == false){
         $(this).val('');
         a = true
       }else{
         $inputExample.caretToEnd();
       }
    });
});

This is the plugin used for this:

`https://gist.github.com/DrPheltRight/1007907/raw/
  b1ce3b710616f9ee15a6b8ca2b03e35756d3d816/jquery.caret.js`