Question

这是我们在stackoverflow，facebook等上看到的一个非常常见的用例。

您经常希望为用户提供一些文字来指导他做什么，但您希望文本在点击它时就消失。

通过JQuery最简单的方法是什么？这似乎是一个相当常见的用例

Answer 1

我在搜索输入上使用这个简单的脚本：

$(document).ready(function () {

    searchInput = $('#search-input');
    searchDefault = 'Please enter text';

    searchInput.click(function () {
        if($(this).val() == searchDefault)
            $(this).val('');
    });

    searchInput.blur(function () {
        if($(this).val() == '')
            $(this).val(searchDefault);
    });

});

您还可以指定其他一些功能，例如将颜色或某些效果更改为点击和模糊事件。

Answer 2

我认为你所寻找的通常被称为“水印” - 而你是对的，这很常见。有许多jQuery插件可以满足您的要求。

例如：http://code.google.com/p/jquery-watermark/

Answer 3

我们一起去 - jsfiddler.net

上的代码段

jQuery的：

$(function() {
    $('#placeholderText').val("Placeholder")
        .focusin(function(){
            if($(this).hasClass('initialClass'))
                $(this).removeClass('initialClass').
                    addClass('normalClass').val('');                
        })
        .focusout(function(){
            if($(this).hasClass('normalClass') && $(this).val() == '')
                $(this).removeClass('normalClass').
                    addClass('initialClass').val('Placeholder');    
        });
});

CSS：

.initialClass {
    color: #999999;
}

.normalClass {
    color: #000000;
}

HTML：

Click on me: <input id="placeholderText" type="text" class="initialClass" />

Answer 4

如果说明文本在textarea内，您可以使用toggleVal插件。我没有使用jquery水印插件，它可能会更好，所以看看两者。 http://jquery.kuzemchak.net/toggleval.php

HTML：

<label for="field1">Some text to explain the text area.</label>
<textarea id="field1" name="textarea1"></textarea>

CSS：

.toggleval {
  font-style: italic;
  color:#333;
}
.tv-changed, .tv-focused {
  font-style: normal;
  color:#000;
}

Javascript:
$('.toggle').toggleVal({
    populateFrom: "label",
    removeLabels: true
});

Answer 5

除了上面提到的所有好建议之外，我发现类似下面的内容对于简单的网站来说也可以正常工作......

 $(this).focusin(function () {
       }).focus(function () {
             if ($(this).val() == 'Enter a comment') {
                  $(this).select();
             }
          }).val("Enter a comment").select();
 });

jQuery：在textarea中焦点，删除默认文本+更改颜色，在非焦点上 - 放回文本

5 个答案: