使用jQuery在文本字段内淡出文本值

我不完全确定这是否可行，但对于jQuery和JavaScript来说，我非常了解，但是这个让我难以理解。我创建了一个简单的插件，用于清除焦点上的文本输入，然后在没有输入任何内容时显示默认值。使用jQuery在文本字段内淡出文本值

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

我想出了一个使用跨度的解决方案，其中包含默认值，并绝对将它们放置在文本输入上，隐藏和显示它们，具体取决于用户是否输入了任何文本。如果存在的话，我宁愿采用一种非常简单的方法。

编辑

使用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); 
    } 
});

来源

2010-06-18 Dwayne Charrington

您已经在这里确定了最好的跨浏览器解决方案，位于顶部的元素，不确定您是否仍然可以在任何地方工作而改进它。 – 2010-06-18 00:06:18

只是一个快速的思想，你尝试过用动画的方法来改变文本框，让背景的文本的颜色？然后当动画完成时，您可以清除内容。

它的一个想法。自从我使用动画的东西以来，它已经有一段时间了，但如果您有兴趣，我可能会掀起一个代码示例。

来源

2010-06-18 00:08:05 ckramer

非常感谢您的建议。我应该写一些动画代码是正确的，我很熟悉它，尽管很少用它来试用它。我会报告我如何去，但我认为它会起作用。 – 2010-06-18 00:12:13

简单但优雅的解决方案。 jQuery不支持彩色动画，但如果你有jQuery UI，你可以做彩色动画，否则还有一个彩色动画插件可以下载。我更新了我的问题，以反映我使用的代码，以防别人想知道如何去做。 – 2010-06-18 00:18:25

太棒了，我没有机会对它进行测试（在我的漏洞修复修补程序之间争论儿童），所以我很高兴它能够工作（使用jQuery UI）。 – ckramer 2010-06-18 00:20:53

这就是我正是用这个。第一添加到您的JavaScript包括： http://plugins.jquery.com/project/color

然后做到这一点：

$('.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（）效果。

来源

2010-06-18 01:03:02 Jubair

我刚碰到这个问题，我的解决方法很简单，只需将属性“value”更改为“'即可。这基本上会用什么都替代文本。

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

来源

2012-03-09 15:55:58 Brett

这只是删除字段中的文本，而不是平稳淡出。请注意，'$（selector）.val（“”）;'更短。 – Aletheios 2012-10-28 15:27:02

这种工作：.fadeOut（）.val（“new value”）.fadeIn（），但整个输入字段消失，这是丑陋的。 – 2013-11-08 00:18:16

使用jQuery在文本字段内淡出文本值

回答

相关问题