0

我正在尝试为搜索字段设置默认值。这个想法是，搜索字段的值是“搜索”，直到用户点击它，然后它应该是空的。此外，只要它是“空白”（以“搜索”为值），它就应该具有“.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 有关。有任何想法吗？

谢谢！

4

7 回答 7

4

这被称为水印。有关示例，请参见http://digitalbush.com/projects/watermark-input-plugin/

于 2009-06-23T18:29:29.957 回答
3

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

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

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

于 2012-10-31T15:16:10.100 回答
2

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

<input ... type="text" value="Search" />
于 2009-06-23T18:29:42.390 回答
2

听起来您只需要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为。

于 2009-06-23T18:30:07.617 回答
1

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

不管怎么说，还是要谢谢你！

于 2009-06-23T18:28:05.497 回答
0

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

<input autocomplete="off" class="blank" ....
于 2009-06-23T18:28:45.107 回答
0

这是我用来执行此操作的片段。可能有更简单的方法，但这有效。任何具有 .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);
        });
    /*
    */
});
于 2009-06-23T18:36:06.967 回答