0

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

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

5 回答 5

3

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

<input id="searchInput" type="text" placeholder="Search" name="searchInput" />
于 2012-05-25T21:26:29.430 回答
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('');
});
于 2012-05-25T21:30:37.680 回答
1

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

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');
});
于 2012-05-25T21:29:51.393 回答
1

如果您使用的是 HTML5，那么您应该使用placeholder属性.

如果您使用的是 HTML4.01 或 XHTML1.0，请查看此问题的最终编辑：不显眼的“默认”文本在输入中没有 jQuery（最后使用 jQuery）

于 2012-05-25T21:30:55.527 回答
1

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

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

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

希望这可以帮助！

于 2012-05-25T21:45:05.070 回答