搜索功能不可选择的文本答案

【问题标题】：Unselectable text for search function搜索功能不可选择的文本
【发布时间】：2012-05-25 21:22:26
【问题描述】：

我希望创建一个输入文本字段，该字段的文本显示为灰色，显示文本字段的用途，然后在输入字符时删除此文本

例如在 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>

【问题讨论】：

我刚刚找到了这个链接，它可能对未来的人们有所帮助viget.com/inspire/a-better-jquery-in-field-label-plugin
您可以用 div 标签包装输入，将其相对定位，附加绝对跨度作为占位符并在焦点上将其删除。

标签： jquery html css

【解决方案1】：

你可以像这样使用html 5属性placeholder：

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

【讨论】：

这是一个很好的答案，效果很好，只是想知道对于不支持 html 5 的浏览器我该怎么办？

【解决方案2】：

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

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

执行此操作的其他 JavaScript 方法是使用清除焦点或单击等文本的方法。

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

【讨论】：

如果用户在输入获得和失去焦点后没有键入任何内容，jQuery 版本（不是 JS）会使文本消失。在这种情况下，原始文本应该会重新出现。

【解决方案3】：

正如其他答案所建议的，我建议使用 HTML 5 placeholder 属性。对于不支持的浏览器，可以按如下方式添加支持：

// 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('');
        });
    }
});

此代码源自这里：http://www.cssnewbie.com/example/placeholder-support/

我对其进行了修改以支持密码字段（尽管它们只是显示为 *）并且一直在成功使用它。我喜欢它，因为我只使用 HTML placeholder 属性，并且一切正常。

希望这会有所帮助！

【讨论】：

我还没有对此进行测试，但是将这段代码放在我的 html 页面的头部就足够了吗？
新的最佳实践似乎是将您的 js 代码放在页面末尾，以便加载更快。然后您也不必将代码包装在 $(document).ready() fn () {});也就是说，我的建议是将其放在正文末尾的

【解决方案4】：

这是来自另一个answer of mine。 this 是这段代码的工作示例。

HTML

<div>
    <label for="search">Search this site</label>
    <input type="text" id="search" value="" />
</div>

CSS

body { padding: 20px; }

div { position: relative; }
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; }
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; }
.populated label { display: none; }
.focused label { color: #aaa; }

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');
});

【讨论】：

【解决方案5】：

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

如果您使用的是 HTML4.01 或 XHTML1.0，请查看此问题的最终编辑：unobtrusive "default" text in input WITHOUT jQuery（最后使用 jQuery）

【讨论】：