javascript - Make a *only a portion* of a text box not editable - Stack Overflow

admin管理员组

文章数量:1353470

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/username" but I want the "example/" to be in the text box but not editable

Tumblr does this but I can't figure out how:

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./username" but I want the "example./" to be in the text box but not editable

Tumblr does this but I can't figure out how: http://www.tumblr./register

• javascript
• jquery
• html
• user-input

Share Improve this question Follow asked Nov 17, 2010 at 1:04 Kyle CureauKyle Cureau 19.4k2323 gold badges7777 silver badges104104 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

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.

As you can see the additional .tumblr. 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./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.
</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. you can see that the ".tumblr." 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. 

本文标签： javascriptMake a *only a portion* of a text box not editableStack Overflow