Question

我希望用户能够在我的网站上自定义个人网页，其中文本框的值将为“example.com/username”，但我希望“example.com/”为在文本框中但不可编辑

Tumblr这样做但我无法弄清楚如何：http://www.tumblr.com/register

Answer 1

这是Tumblr页面中的相关代码。

     <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

正如您所看到的，额外的.tumblr.com根本不是输入文本框的一部分。它是一个div，其样式看起来就像它旁边的文本输入框。因此给它一个不可写的输入文本字段的错觉。

Answer 2

实际上有一种JavaScript方式可以做到这一点而不会出现混乱的CSS黑客攻击。请参阅此页面上的脚本：http://aspdotnet-suresh.blogspot.com/2010/11/introduction-here-i-will-explain-how-to.html

Answer 3

你可以用css解决所有问题，是div的一侧的输入，包含不会以相同外观改变的部分。

你的例子中的

html：

<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>

Answer 4

您可以通过检查文本框onkeyup的值来执行此操作。在您的事件处理程序中，您可以确保文本框在用户点击密钥后显示您想要的任何内容。如果他们删除了你的文字，你只需将其放回原处。您还需要确保您的处理程序也被调用onblur。

Answer 5

没有办法做到这一点。如果您查看tumblr.com的来源，您可以看到“.tumblr.com”在输入标记之外。它只是简单的造型。输入框的右边界=没有。并添加兄弟节点以继续样式。

 <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

使只是文本框的一部分不可编辑

5 个答案:

使*只是文本框的一部分*不可编辑

5 个答案:

使只是文本框的一部分不可编辑