jQuery：在文本区域中的焦点上，删除默认文本+；更改颜色，在未聚焦时-将文本放回

这是我们在stackoverflow、facebook等网站上看到的一个非常常见的用例

你经常想给用户一些文本来指导他做什么，但是你想让文本在他点击时消失

---

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

我在搜索输入中使用了以下简单脚本：

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

});

---

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

我认为您正在寻找的通常称为“水印”-没错，这是非常常见的。有许多jQuery插件可以满足您的要求

例如：

我们开始吧-继续

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:

HTML:

点击我：

如果说明文本位于文本区域内，则可以使用toggleVal插件。我没有使用jquery水印插件，它可能会更好，所以请查看这两个插件。

HTML:

---

除了上面所有的好建议之外，我发现下面类似的东西对简单的网站也适用

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

---

你为什么不接受其中一个作为答案-/我试过了，但是每一个都很好！非常感谢，维克多！我想我将首先使用上面描述的插件，如果它太复杂，我将使用它=）谢谢键！我将评估水印和切换值

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

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

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

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

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