Auto copy one form field to another but only up to a certain character

[UPDATE]

I have tried Clives solution (thanks), it doesnt seem to work for me.

I am using the following form code

<fo开发者_运维技巧rm>
Email: <br /><input type="text" name="email" id="email" value="" /><br />
Name: <br /><input type="text" name="name" id="name" value="" />
</form>

and have updated Clives code to the following

<script type="text/javascript"> 
           $('#name').bind('focus', function() {
  if ($(this).val() == '' && $('#email').val() != '') {
    var emailPart = $('#email').val().split('@')[0];
    $(this).val(emailPart);
  }
});
</script>

Any ideas?

Thanks!

How would I go about copying one form field to another but only up to a certain character?

I would like to automatically copy everything entered in the email address field UP TO the @ symbol into the username field

e.g entering the following into the email field

franco@imrubbishatprogramming.com

would automatically populate the username field with

franco

I would like this to happen once the user clicks on the username field OR they tab to it.

Thanks very much Si

$(document).ready(function() {
  $('#id-of-username-field').bind('focus', function() {
    if ($(this).val() == '' && $('#id-of-email-field').val() != '') {
      var emailPart = $('#id-of-email-field').val().split('@')[0];
      $(this).val(emailPart);
    }
  });
});

That should do it