Question

I am creating a input form, and i know how to do onfocus onblur placeholder stuff etc etc..

aside from layering a div on top of my input field, this is what I want to do..

When user clicks in the input field ( in this instance to type in a website address )

How can I make it so that http:// appears in the input field, and when they focus on the field, the text prompt appears after the http://

so all that they do is type in the remainder of the website URL.

example:

   <fieldset>
     <input type="text" class="requiredField" name="websitename" value="http://" onfocus="if(this.value=='http://')this.value='';" onblur=  "if(this.value=='')this.value='http://';"/>
   </fieldset>

From the example above, the http:// appears in the input element. But on click, it disappears. What I wanna do, is the prompt appears AFTER the http:// so thy can type their website address.

Perhaps jQuery could fix this, its hard to know what to search for on google to get some ideas.

I am sure I have seen sites implement this. I dont just want an image, because on submit, I still want it to parse the full URL and not just the http://www.fsfsdfsfsd.com bit that they actually typed in.

Cheers

Answer 1

Get the value and reinsert the value.

$('input[name="websitename"]').focus(function() {
    var theVal = $(this).val();
    $(this).val(theVal);
});

Sorry, EDITED. Forgot the closing parenthesis.

EDIT 2: Part of the problem you might be seeing is the fact that you have onfocus and onblur on your input, and the onfocus is clearing out the existing value. Remove that and try my script.