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

我不完全确定这是否可能，我对jQuery和JavaScript的知识非常了解，但这个让我很难过。 我创建了一个简单的插件，清除焦点上的文本输入，然后显示默认值，如果没有输入任何内容。

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

我确实提出了一个使用包含默认值的跨度的解决方案，并将它们绝对定位在文本输入上，隐藏并显示它们，具体取决于用户是否输入了任何文本。 如果存在的话，我宁愿采用一种直截了当的方法。

编辑

使用jQuery UI中的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); } }); 

Answer 1

只是快速思考，您是否尝试使用动画方法更改文本框中文本的颜色以匹配背景？ 然后，当动画完成时，您可以清除内容。

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

Answer 2

这就是我用于此的内容。 首先将其添加到您的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（）效果。

Answer 3

我刚遇到这个问题，我的解决方案非常简单，只需将属性“value”更改为”即可。 这基本上将取代文本。

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