使用jQuery淡出文本字段中的文本值 [英] Fade out text value inside of text field using jQuery

问题描述

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

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

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

编辑

使用jQuery UI中的jQuery animate函数或作为jQuery插件提供，您可以在文本颜色为该字段的聚焦和模糊（如下所示）时将其设置为输入的颜色。

  obj.bind（focus，function）这是我在使用的代码， （）{
 if（$（this）.val（）== oldValue）{
 $（this）.animate（{color：'＃E8DFCC'}，1000）.val（''） ; 
} 
}）; 
 $ b obj.bind（blur，function（）{
 if（$（this）.val（）。length< = 3）{
 $（this） .animate（{color：'＃56361E'}，600）.val（oldValue）; 
} 
}）; 
  

解决方案

方法来改变文本框中文本的颜色以匹配背景？然后，当动画完成后，您可以清除内容。

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

I am not entirely sure if this is possible or not, I am pretty knowledgeable when it comes to jQuery and JavaScript in general, but this one has me stumped. I've created a simple plugin that clears a text input on focus and then displays the default value if nothing has been entered.

Is it possible to fade out just the text itself inside of the text input, and not the whole field itself? All attempts seem to result in the text field itself fading out and eventually hiding the element from view.

I did come up with a solution of using spans containing the default value and absolutely positioning them over the text input, hiding and showing them depending if a user has entered any text or not. I would much rather a much straightforward approach if one exists.

Edit

Using the jQuery animate function which is in jQuery UI or available as a plugin for jQuery, you can animate the text color to be the color of the input upon focusing and blurring of the field (as pointed out below). Here is the code that I am using in-case you wanted to know how.

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

解决方案

Just a quick thought, have you tried using the animation method to change the color of the text in the text box to match the background? Then when the animation completes you can clear the contents.

Its a thought. Its been a while since I've used the animation stuff, but I could probably whip up a code sample if you are interested.

这篇关于使用jQuery淡出文本字段中的文本值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！