更改文本并在输入中设置光标

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('');
});

Answer 2

You can use the selectionStart property of an input field to get the location of the caret and you can then check if this is behind the word 'Hello', by matching with the value of the field. You can then use setSelectionRange to set the caret to a position. setSelectionRange(0,0); will set it to the beginning.

Edit: I just reread your questions and if you just want to delete all text when you type in it again, you can just use select() to select all text in the field. If you then start typing it deletes the selected text.