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

问题描述

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

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.

编辑

使用 jQuery UI 中或作为 jQuery 插件提供的 jQuery animate 函数，您可以将文本颜色设置为在字段聚焦和模糊时输入的颜色(如下所述).这是我正在使用的代码，以防您想知道如何操作.

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淡出文本字段内的文本值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！