Question

I have a input box which it’s for email accounts, it’s bg-image is “@mydomain.com” positioned in right, and user could make their own email account in my system.

After they typed their user, for example “behzad”, I want to the bg-image of the input comes in left and fill the empty space if there is.

For example, someone types “x” for the user name, and because the “@mydomain.com” is positioned in right, there is lots of free space between “x” and “@mydomain.com”, it’s like “x(SPACE SPACE SPACE SPACE SPACE…)@mydomain.com” I want that on blur of that input box, it goes like this “[e-mail]”.

$('#email-input').blur(function(){
    $(this).css('background', 'new_position')
});

How ‘new_position’ could be determined based by the user input string width?

Answer 1

Here is the way I figured this out:

$('#username').blur(function(){
    var user_input = $('#username').val();
    $(this).removeClass('email-input');
    $('#username').val(user_input+'@mydomain.com');
});

no free space, and also I get what I wanted without determining the string width.

Thanks everyone.