如何在用戶鍵入內容時清除字段的背景？

我有一個搜索領域，基本上給用戶一個「小費」什麼搜索（這是背景圖片）。當他鍵入內容時，我需要清除背景。但我不知道如何。如何在用戶鍵入內容時清除字段的背景？

這是searchfield：

<input style="font-size:20px; width:300px; color: #444; background: url('http://chusmix.com/Imagenes/busca.png') white;" type="text" id="s" name="s" onblur="if(this.value == '') { this.style.background='url(http://chusmix.com/Imagenes/busca.png) no-repeat 0% 50% white';}">

是否有一個簡單的方法來做到這一點？如果您需要更多信息，請詢問。謝謝

來源

2011-01-13 lisovaccaro

在標記中加入這個小小的javascript：onFocus ='this.value =「'';

來源

2011-01-13 17:57:47

謝謝，我用之前。但是現在我想在用戶鍵入內容時清除背景。不是他專注的時候。 – lisovaccaro 2011-01-13 18:00:41

你最好的選擇是這個答案，如果我是誠實的，其他回調（不使用jQuery）不註冊按鍵很好 – 2011-01-13 18:06:28

事情是。該字段自動聚焦，所以用戶不知道該怎麼做，我不會用按鍵來做。 – lisovaccaro 2011-01-13 18:23:49

我想你想擺脫onblur，而不是使它onfocus（所以背景改變時，他們進入框）..甚至onchange，所以只要他們鍵入它消失。

來源

2011-01-13 18:00:11 JohnO

我使用Facebook的插件一樣從這裏

http://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

我只是在這個一來一去，這是很容易使用asp.net頁面輸出來實現JSON（從搜索PARAMS）然後theres的Javascript短短的幾行，你需要創建它（和設置）

$(document).ready(function() { 
     $("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", { 
     hintText: "Begin typing the user name of the person you wish to assign.", 
     noResultsText: "No results", 
     searchingText: "Searching..." 
    }); 
});

希望這可以幫助你

來源

2011-01-13 18:00:56 Wazzzy

假設txtTopSearchBox是文本框的ID和「搜索」是對（TIP）的內容

$（文件）。就緒（函數（）{ $（「＃txtTopSearchBox」）。重點（function（）{ $（this）.removeClass（）。addClass（「txtSearchBoxFocus」）。val（「」）;

}); 
$("#txtTopSearchBox").blur(function() { 
    if (($(this).val() == "Search") || ($(this).val() == "")) { 
     $(this).removeClass().addClass("txtSearchBox").val("Search"); 
    } 
}); 

$("#txtTopSearchBox").keypress(function(e) { 
    if (e.which == 13) { 

     var key = $("#txtTopSearchBox").val(); 
     key = escape(key); 
     window.location.href = "browse.aspx?search=" + key; 
     return false; 
    } 
});

}）;

來源

2011-01-13 18:01:14 Shyju

如果您對html5感興趣，即將推出的placeholder attribute將負責處理此問題。但是，唉，並非所有瀏覽器都可以使用html5。 this page上的第二個子標題顯示瀏覽器兼容性。

在此之前，JavaScript方法PMV描述的很好。

來源

2011-01-13 18:05:16 Bryan

經過測試，適用於Fx 3.6，Safari 5和Chrome。圖片太大場時不復制的屬性到withoutTip太

<style type="text/css"> 
.withTip { 
    font-size:20px; 
    width:300px; 
    color: #444; 
    background: white url(http://chusmix.com/Imagenes/busca.png) } 
.withoutTip { background: white url()} 
</style> 

<input class="withTip" type="text" id="s" name="s" 
onkeyup="this.className=(this.value=='')?'withTip':'withoutTip'" />

或

<style type="text/css"> 
#s {font-size:20px; width:300px; color: #444;} 
.withTip { background: white url(http://chusmix.com/Imagenes/busca.png) } 
.withoutTip { background: white url()} 
</style>

來源

2011-01-13 18:13:00 mplungjan

如何在用戶鍵入內容時清除字段的背景？

回答

相關問題