Question

我使用VS2010，C＃来开发ASP.NET Web应用程序，我将实现一个类似于Stackoverflow（或其他站点）中使用的搜索框，最初有一个短语（例如“搜索”）在搜索文本框中，当用户在文本框中单击时，其文本被清空，用户可以键入他的短语，但如果他将文本框（丢失焦点）留空，则再次显示短语“搜索”，如何实现这个好效果？

感谢

Answer 1

这是我使用的文本框水印插件：

http://code.google.com/p/jquery-watermark/

然后我创建了以下代码，该代码使用title属性为.textbox_watermark类

的所有元素的水印文本

var Textbox_Watermark =
{
    init: function () {

        var textboxWatermarks = $(".textbox_watermark");

        for (var i = 0, ii = textboxWatermarks.length; i < ii; i++) {
            $(textboxWatermarks[i]).watermark(textboxWatermarks[i].title);
        }
    }
}

Textbox_Watermark.init();

然后当焦点位于文本框上时，水印将被删除。

您需要jQuery框架才能使用

Answer 2

这是我用于此目的的一个小脚本。它确实需要JQuery，但如果这是你的选择，那么试一试。（可能还有一个javascript替代方案，但我不知道）

function addInputBlur(selector, text) {
    var element = $(selector);

    element.blur(function () {
        if ($(this).val() == "") {
            $(this).val(text);
            $(this).addClass("InputBlur");
        }
        else {
            $(this).removeClass("InputBlur");
        }
    });
    element.focus(function () {
        if ($(this).val() == text) {
            $(this).removeClass("InputBlur");
            $(this).val("");
        }
    });

    element.blur();
}

注意：“selector”参数应该是JQuery选择器值（即“#MyTextbox”）

另外，“InputBlur”CSS类只是我用于灰色/斜体字体的样式

Answer 3

我已经看到了堆栈溢出的视图源，我注意到它们有一个名为占位符的属性

<div id="hsearch">
                <form id="search" action="/search" method="get" autocomplete="off">
                <div>

                    <input autocomplete="off" name="q" class="textbox" **placeholder="search"** tabindex="1" type="text" maxlength="140" size="28" value="">
                </div>
                </form>
            </div>

尝试这适用于mozilla，检查其他人

希望有所帮助

Answer 4

您可以使用与此类似的函数在JavaScript中执行此操作：

        /*
         * applyDefaultValue() - Takes a DOM object and it's string value as paramters, when the element
         * is focussed, the 'value' is blanked out, ready for user entry. When the item is blurred, if nothing was typed
         * then the original value is restored.
         */
        function applyDefaultValue(elem, val) {
            elem.value = val;
            elem.onfocus = function() {

                if (this.value === val) {
                    this.value = ''; //On focus, make blank
                }
            }

            elem.onblur = function() {
                if (this.value === '') {
                    this.value = val; //If it's not in focus, use declared value
                }
            }
        }

然后，您可以将此应用于以下项目：

        /*
         * Onload function to set the default 'email address'/'search' value and blank out the password field
         */
        window.onload = function() {
            applyDefaultValue(document.getElementById('email'), 'Email Address');
        }

Answer 5

<input type="text" 
    onblur="javascript:if(this.value=='') this.value= this.defaultValue;" 
    onfocus="javascript:if(this.value==this.defaultValue) this.value='';" 
    id="txtSearch" 
    value="search" 
    name="txtSearch" />

ASP.NET实现了像stackoverflow搜索框这样的搜索框

5 个答案: