Javascript Deselect on Focus

Here's the scenario: you've got two text input, userid and email address. For email address field, I want to have the domain part pre-filled (say, @example.com). Now when the user enters the userid and jumps to email input, the browser selects the whole text as default behavior. But I want to append userid to the beginning and select only the userid part. Using jQuery, the usual code would be like this:

However, THIS DOESN'T WORK!!

To make this to work, you need to set the selectionStart and selectionEnd values after a while the inputbox is focused.