*僅使文本框的一部分*不可編輯

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

可以解決一切與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 3

您可以通過檢查你的文本框的onkeyup的價值做到這一點。在您的事件處理程序中，您可以確保文本框在用戶點擊某個鍵後說出任何您想要的內容。如果他們刪除了你的文字，你就把它放回去了。你也想確保你的處理程序也被稱爲onblur。

Answer 4

有沒有辦法做到這一點。如果您查看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 

Answer 5

實際上有一種JavaScript方法可以做到這一點，而不會造成混亂的CSS黑客攻擊。見本頁的腳本：http://aspdotnet-suresh.blogspot.com/2010/11/introduction-here-i-will-explain-how-to.html