ASP.NET 实现类似 stackoverflow 搜索框的搜索框答案

【问题标题】：ASP.NET implementing a search box like stackoverflow search boxASP.NET 实现类似 stackoverflow 搜索框的搜索框
【发布时间】：2012-02-10 13:28:49
【问题描述】：

我使用 VS2010,C# 开发一个 ASP.NET Web 应用程序，我将实现一个搜索框，就像 Stackoverflow（或其他网站）中使用的那样，最初有一个短语（例如“搜索”）在搜索文本框中，当用户单击文本框时，其文本被清空并且用户可以输入他的短语，但是如果他将文本框（失去焦点）留空，则再次显示短语“搜索”，我该如何实现效果这么好？

谢谢

【问题讨论】：

看看这个：stackoverflow.com/questions/4770585/…
谢谢大卫，我试试看
不要害怕 JQuery，jQuery 是 100% 纯跨浏览器的纯 JavaScript。除非您在所有浏览器中进行测试，否则其他解决方案最终会在某些浏览器上中断......

标签： javascript asp.net

【解决方案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 框架才能工作

【讨论】：

您也可以使用客户端ajaxcontroltoolkit中的文本框水印扩展器来完成。您可以查看this

【解决方案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();
}

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

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

【讨论】：

【解决方案3】：

我已经看到堆栈溢出的视图源，我注意到它们有一个名为 placeholder

的属性

<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 ，检查其他人

希望对你有帮助

【讨论】：

【解决方案4】：

<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" />

【讨论】：

如果我想搜索search怎么办？
你是对的！当然我自己的数据库中没有这个问题，但我认为这个方法有问题！谢谢你的回答
我更喜欢使用纯 JavaScript，因为我有点害怕 JQuery！
@Ali_dotNet：这是一个令人讨厌的、不可重用的、影响阅读的解决方案……让我看着就不舒服。另外，Curt 有一个很好的观点，你最终会得到一个错误的功能
这就像在四月吃圣诞火鸡。它曾经很好，但现在它又旧又干了，我正在享受我的复活节彩蛋。

【解决方案5】：

您可以在 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');
        }

【讨论】：