Javascript 使用jQuery淡出文本字段内的文本值

我不完全确定这是否可行，我对jQuery和JavaScript的总体知识相当渊博，但这一点让我感到困惑。我创建了一个简单的插件，可以清除焦点上的文本输入，如果没有输入任何内容，则显示默认值

是否有可能只淡出文本输入中的文本本身，而不是整个字段本身？所有的尝试似乎都会导致文本字段本身淡出，并最终从视图中隐藏该元素

我确实想出了一个解决方案，使用包含默认值的跨距，并将它们绝对定位在文本输入上，根据用户是否输入了任何文本来隐藏和显示它们。如果存在的话，我宁愿采用更直接的方法

编辑

使用jQuery UI中的jQuery动画功能或作为jQuery插件提供的jQuery动画功能，可以在聚焦和模糊字段时将文本颜色设置为输入的颜色（如下所述）。这是我正在使用的代码，以防您想知道如何使用

    obj.bind("focus", function() {
  if ($(this).val() == oldValue) {
      $(this).animate({ color: '#E8DFCC' }, 1000).val('');
  }
 });

 obj.bind("blur", function() {
  if ($(this).val().length <= 3) {
      $(this).animate({ color: '#56361E' }, 600).val(oldValue);
  }
 });

对象绑定（“焦点”，函数（）{ if（$（this）.val（）==oldValue）{ $（this.animate（{color:'#E8DFCC'}，1000.val（''）； } }); 对象绑定（“模糊”，函数（）{

---

如果（$（this）.val（）.length只是一个简单的想法，您是否尝试过使用动画方法更改文本框中文本的颜色以匹配背景？然后在动画完成后可以清除内容

---

这是一个想法。我已经有一段时间没有使用动画了，但是如果你感兴趣的话，我可能会制作一个代码示例。

这就是我使用的方法。 首先将其添加到JavaScript中，包括：

然后这样做：

$('.search-input').focus(function(){
    if($(this).val() == 'Default Text'){
        $(this).animate({
            color: '#fff'
            //your input background color.
        }, 500, 'linear', function(){
            $(this).val('').css('color','#000'); 
            //this is done so that when you start typing, you see the text again :P
        });
    }
}).blur(function(){
    if($(this).val() == ''){
        $(this).val('Default Text').css('color','#fff');
        $(this).animate({
            color: '#000'
        }, 500, 'linear');
    }
});

这样做的目的是将文本淡入背景色，然后清空输入字段。在“模糊”中，首先显示默认文本，然后将其淡入原始颜色

幻觉：）

---

如果你不想真正清除字段，你可以删除很多。但是你明白了。这里的关键是两件事。使用颜色插件和.animate（）效果。

我刚刚遇到了这个问题，我的解决方案很简单，只需将属性“value”更改为“”。这实际上将用零替换文本

$(selector).attr('value', '');

---

您已经在这里找到了最好的跨浏览器解决方案，一个位于顶部的元素，不确定您是否可以在仍然在任何地方工作的情况下对其进行改进。非常感谢您的建议。我应该正确地编写一些动画代码，我对它非常熟悉，但几乎不使用它进行尝试。我会报告我的进展，但我估计会成功将工作。简单，但优雅的解决方案。jQuery不支持开箱即用的彩色动画，但如果你有jQuery UI，你可以做彩色动画，否则你也可以下载彩色动画插件。我更新了我的问题，以反映我使用的代码，以防其他人想知道如何做。太棒了，我没有一个测试它的机会（在我的破解溢出修复程序之间纠缠孩子们），所以我很高兴它能工作（使用jQuery UI）。这只是删除字段中的文本，而不是平滑地淡出它。请注意，

$（选择器）.val（“”；

甚至更短。这种排序方法有效：.fadeOut（）.val（“新值”）.fadeIn（）但是整个输入字段消失了，这很难看。