Make a *only a portion* of a text box not editable

I want a user to be able to customize their personal url page on my site, where the value of a text box will be "example.com/username" but I want the "example.com/" to be in the text box but not editable

Tumblr does this but I can't figu开发者_StackOverflow社区re out how: http://www.tumblr.com/register

This is the code in question from the Tumblr page.

     <input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
    id="tumblelog_name" name="tumblelog[name]"
                                            onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') 
{ $('tumblelog_name_background').style.color = '#c1cfdd' }"/>.tumblr.com

As you can see the additional .tumblr.com is not part of the input text box at all. It's a div that is styled to look like the text input box next to it. Therefore giving it the illusion of an unwritable input text field.

There is actually a JavaScript way of doing this without a messy CSS hack. See the script on this page: http://aspdotnet-suresh.blogspot.com/2010/11/introduction-here-i-will-explain-how-to.html

you can solve everything with css, is an input to the side of a div that contains the part that does not change with the same look.

html in your example:

<div style="position:absolute; right: 8px; top: 4px; white-space: nowrap;">
     <input type="text" 
            class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;" 
            id="tumblelog_name" 
            name="tumblelog[name]"     
            onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" 
            onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') { $('tumblelog_name_background').style.color = '#c1cfdd' }">.tumblr.com
</div>

You do it by checking the value of your textbox onkeyup. In your event handler you can make sure the textbox says whatever you want after the user hits a key. If they delete your text, you just put it back in there after. You would also want to make sure your handler gets called onblur as well.

there is no way to do this. if you view the source of tumblr.com you can see that the ".tumblr.com" is outside the input tag. its just simple styling. Right border of the input box = nothing. And add sibling node to continue the styling.

 <input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
                        id="tumblelog_name" name="tumblelog[name]"
                                                    onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') 
`enter code here`{ $('tumblelog_name_background').style.color = '#c1cfdd' }"
/>.tumblr.com