为搜索字段设置默认值 - 请帮助！答案

【问题标题】：Set default value for Search field - Please Help!为搜索字段设置默认值 - 请帮助！
【发布时间】：2009-06-23 18:24:15
【问题描述】：

我正在尝试为搜索字段设置默认值。这个想法是，搜索字段的值是“搜索”，直到用户点击它，然后它应该是空的。此外，只要它是“空白”（以“搜索”为值），它就应该具有“.blank”类。

我试过了

<input autocomplete="off" class="" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="" />

到目前为止它可以工作，但是当我加载站点时，该字段是空的。我必须先在该字段内单击，然后再单击页面上的某个位置才能使效果生效。

我猜它与 onBlur 有关。有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript jquery textfield

【解决方案1】：

这称为水印。示例见http://digitalbush.com/projects/watermark-input-plugin/

【讨论】：

【解决方案2】：

另一个想法是在输入类型中放置占位符：（注意这是 HTML5。）

<input type=text placeholder="Default text here"/>

这样，文本字段将以灰色文本颜色显示：此处为默认文本。单击后，它将删除文本并将其替换为您当前的文本，当它为空时，它会返回。

【讨论】：

【解决方案3】：

只需给它硬编码的默认值“搜索”，如

<input ... type="text" value="Search" />

【讨论】：

【解决方案4】：

听起来你只需要将初始值设置为Search，直接在输入标签中，如下所示：

<input autocomplete="off" class="blank" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="Search" />

请注意，我们还将初始类设置为blank。

【讨论】：

【解决方案5】：

我发现了问题，我的错误：当用户点击其他地方时调用了 onBlur。 onLoad 只允许用于标签 BODY 和 FRAMESET。解决方案是在服务器端的某处设置默认值（对于我来说，在 application_controller 中，如果没有提交搜索词）。

还是谢谢！

【讨论】：

【解决方案6】：

模糊是当一个字段失去焦点时，它不能失去焦点，直到它开始有焦点，因此你需要点击该字段，然后点击它才能看到它的工作。您是否尝试过将类默认设置为 .blank ？

<input autocomplete="off" class="blank" ....

【讨论】：

【解决方案7】：

这是我用来执行此操作的 sn-p。可能有更简单的方法，但这是可行的。任何具有 .cleardefault 类的项目都会在第一次鼠标悬停时清除其值。任何具有 .setcleardefault 类的项目都将清除默认值，如果用户没有在框中放置任何内容，则在鼠标移出时将其重置为默认值。

function ClearDefault(item) {
    // clear the default value of a form element
    if (item.defaultValue == undefined)
        item.defaultValue = item.value;
    if (item.defaultValue == item.value)
        item.value = '';
} // ClearDefault

function SetDefault(item) {
    // if item is empty, restore the default value
    if (item.value == '')
        item.value = item.defaultValue;
} // SetDefault

$(document).ready(function() {
    $(".cleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
    $(".setcleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
        .mouseout(function(){
            SetDefault(this);
        });
    /*
    */
});

【讨论】：