Question

我有一个搜索字段，它基本上为用户提供搜索内容的“提示”（这是背景图像）。当他输入内容时我需要擦除背景。但我不确定如何。

这是搜索字段：

<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';}">

有一种简单的方法吗？如果您需要更多信息，请询问。感谢

Answer 1

在标记中添加以下一点javascript：onFocus ='this.value =“”';

Answer 2

我认为你想要摆脱onblur，而是让它onfocus（因此当他们进入框时背景会发生变化）..甚至onchange所以每当他们输入它消失了。

Answer 3

我正在使用Facebook这样的插件

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

我刚刚开始使用asp.net页面输出 JSON （来自搜索参数）真的很容易实现然后只有几行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..."
    });
});

希望这可以帮助您

Answer 4

假设txtTopSearchBox是文本框的id，“Search”是该内容（提示）

$（document）.ready（function（）{ $（“＃txtTopSearchBox”）。focus（function（）{ $（本）.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;
    }
});

}）;

Answer 5

如果您对html5感兴趣，即将到来的placeholder attribute将会解决这个问题。但是，唉，并非所有的浏览器都准备好了html5。 this page上的第二个子标题显示了浏览器兼容性。

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

Answer 6

经过测试，适用于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>

当用户输入内容时，如何删除字段的背景？

6 个答案: