Question

I have an input that contains a text. When I click into this input, so the color of the text will change. In the input is eg. the text ‘Hello buddy’ – and when I click into the input in the end of the word Hello, so exist any easy way to set the cursor on the start (before the word Hello)?

$('#your_name').focus(function(){
    if($(this).val() == $(this).attr('title')){
        $(this).css('color', 'red');
    }

    $(this).keyup(function() {
      $(this).val('');
    });
});

And when I start to type a text into the, how can I remove the current text Hello buddy and have in the input only the “new” text? I am trying to do with keyup method, but everything what I type is deleted.

Answer 1

See my DEMO here. Also modified your jsFiddle.. see here

Edit: You can just use el.setSelectionRange(index, index); to set the caret position.

And for your second question about removing the whole text when you keyup, You can use .one method which will executed only once.,

$(this).one('keydown', function() {
      $(this).val('');
});