Jquery 搜索功能的不可选择文本

我想创建一个输入文本字段，该字段显示了文本字段的用途，在输入字符时应删除该文本

例如，在facebook中，当您单击搜索输入文本区域时，在输入任何字符之前，您将看到“搜索”一词仍然显示

我不知道在JQuery中从哪里开始，因为我不知道这个特性叫什么，但下面是我输入字段的标记

HTML标记

<div class="searchForm">
   <input id="searchInput" value="Search"  autocomplete="off" name="searchInput"   
      onkeyup="showResult(this.value)"/>
   <input type="hidden" name="searchSite" value="1" style="background-color:#000;">
   <input id="searchButton" type="submit" value=""/>
</div>

---

您可以像这样使用html 5属性

占位符

：

<input id="searchInput" type="text" placeholder="Search" name="searchInput" />

这是另一个。这是这个代码段的工作示例

HTML

Javascript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
}).on('focus', function(e) {
    $('div').addClass('focused');
}).on('blur', function(e) {
    $('div').removeClass('focused');
});

---

有几种方法可以做到这一点。使用HTML5，这可以通过使用占位符属性轻松实现。这允许您在HTML元素中定义文本，在焦点上，这将消失

<input id="searchInput" value="Search"  autocomplete="off" name="searchInput" placeholder="Search"   
      onkeyup="showResult(this.value)"/>

---

如果您使用的是HTML5，那么您应该使用

---

如果您使用的是HTML4.01或XHTML1.0，那么请参见此问题的最终编辑：（最后使用jQuery）

正如其他答案所建议的，我建议使用HTML5

占位符

属性。对于不支持此功能的浏览器，可以按如下方式添加支持：

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if ('placeholder' in test) jQuery.support.placeholder = true;
});

$(function() {
    // add placeholder support to browsers that wouldn't otherwise support it. 
    if (!$.support.placeholder) {
        var active = document.activeElement;
        $(':text,:password').focus(function() {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function() {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });

        $(':text,:password').blur();
        $(active).focus();
        $('form:eq(0)').submit(function() {
            $(':text.hasPlaceholder,:password.hasPlaceholder').val('');
        });
    }
});​

此代码源于此：

我修改了它以支持密码字段（尽管它们只是显示为*），并且已经成功地使用了它。我喜欢它，因为我只使用HTML

占位符

属性，一切都很好

---

希望这有帮助

这是一个很好的答案，它工作得很好，只是想知道对于不支持HTML5的浏览器我能做些什么？如果用户在输入后没有键入任何内容并失去焦点，jQuery版本（不是JS）会使文本消失。在这种情况下，原始文本应该会重新出现。我刚刚发现了这个链接，它可能会帮助人们在将来使用div标记包装输入，相对定位，添加一个绝对跨距作为占位符，然后在焦点上删除它。我还没有测试过这一点，但仅仅将这段代码放在html页面的头部就足够了吗？新的最佳实践似乎是将js代码放在页面的末尾，以便更快地加载。然后，您也不必将代码包装在$（document.ready（）fn（）{}）中；也就是说，我的建议是把它放在你身体末端的标签上。此外，这段代码还使用了jQuery，因此如果您还没有使用它，那么还必须包括它。

<input id="searchInput" value="Search"  autocomplete="off" name="searchInput" placeholder="Search"   
      onkeyup="showResult(this.value)"/>

$('input#searchInput').focus(function() {
    $(this).value('');
});

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if ('placeholder' in test) jQuery.support.placeholder = true;
});

$(function() {
    // add placeholder support to browsers that wouldn't otherwise support it. 
    if (!$.support.placeholder) {
        var active = document.activeElement;
        $(':text,:password').focus(function() {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function() {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });

        $(':text,:password').blur();
        $(active).focus();
        $('form:eq(0)').submit(function() {
            $(':text.hasPlaceholder,:password.hasPlaceholder').val('');
        });
    }
});​