J Doer J Doer - 4 months ago 16
HTML Question

Text to the right after blinking cursor inside input tag

I don't know what to search for. But I want to style my input first of all it display a help text with placeholder for example:

<input class="form-control input-lg" id="id_username" maxlength="30" name="username" placeholder="Enter your blog domain" type="text">


Edit: But when the user click on it and enter a value I want to display .domain.com right after the blinking cursor. How could I do that?

Answer

You can use setSelectionRange for your purpose.

$(".input-lg").click(function(){
    if($(this).val() == "")
       $(".input-lg").val(".domain.com");
    $(".input-lg")[0].setSelectionRange(0, 0);
});

Here is the jsFiddle

Hope it helps :)

EDIT: You need to check the field to make sure you don't overwrite the input field existing data every time the field is clicked.