jQuery prepend domain to text input

Question

I have a domain (e.g: example.tld), and I want to allow users to create an e-mail address on this domain by only having to input the first half of the e-mail address. So the domain will be appended to the text box, and when the user clicks on the box the cursor will be at the start of the input field allowing them to enter their name.

Perferrably I would also like the domain value within the text input to be non-editable.

So when the page loads, I want the text box to look like:

<input type="text" id="emailaddress" value="@example.tld" />

Then when the user clicks, and starts entering text it'll look like; with the @example.tld" part being forced.

<input type="text" id="emailaddress" value="[email protected]" />

Any ideas on how to achieve this using jQuery?

Answer 1

why not just set the @example.tld outside of the input box ? since that is the functionality you try to mimic..

Update

as @bobince says in his comment, you would be better off just dealing with the possible user error (submitting a whole email) yourself, once he submitted the info or left the email field.