Javascript 使文本框的*仅部分*不可编辑

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

---

Tumblr可以做到这一点，但我不知道如何做到：

您可以使用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>

---

您可以使用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>

---

您可以通过在KeyUp上检查文本框的值来实现。在事件处理程序中，您可以确保在用户点击某个键后，文本框会显示您想要的内容。如果他们删除了你的文字，你只需在删除后把它放回那里。您还需要确保处理程序也被调用为onblur。

您可以通过检查文本框onkeyup的值来实现。在事件处理程序中，您可以确保在用户点击某个键后，文本框会显示您想要的内容。如果他们删除了你的文字，你只需在删除后把它放回那里。您还需要确保处理程序也被调用为onblur。

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

---

如您所见，additional.tumblr.com根本不是输入文本框的一部分。它是一个div，其样式类似于它旁边的文本输入框。因此给它一个不可写的输入文本字段的错觉

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

---

如您所见，additional.tumblr.com根本不是输入文本框的一部分。它是一个div，其样式类似于它旁边的文本输入框。因此给它一个不可写的输入文本字段的错觉

没有办法做到这一点。如果查看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 

---

没有办法做到这一点。如果查看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 

---

实际上有一种JavaScript方法可以做到这一点，而无需混乱的CSS攻击。请参阅本页上的脚本：

实际上有一种JavaScript方法可以做到这一点，而无需复杂的CSS攻击。请参阅本页上的脚本：