如何在窗体中实现Stack Overflow类似水印？ [英] How can I implement Stack Overflow-like watermarks in forms?

问题描述

基本上，你有一个占位符值，而且当你的输入表单有更多的可用

现在，为了清楚起见：我不想让提示（占位符值文本）消失焦点，而是当我第一次打字的时候变轻。好例子：

• 查看 Aardvark 。这是我希望有我的输入表单。




• 我们自己的Stack Overflow - 当你尝试提出问题， ，它不立即隐藏文本。你看到你的光标以及提示。但是当你开始键入时，它隐藏提示。 （我喜欢它去一个更浅的阴影，而不是一起隐藏，像上面的Aardvark例子。）

任何建议/链接？

我已经很清楚地在interwebz上的某个地方阅读教程了， p>

[更新：我最近发现了一个jQuery插件现场标签，这正是我想要的。此外，这里是链接到改进相同的插件。 ]

解决方案

您可以从这里开始：

 < input type =textvalue =Your Hint Here
 onFocus =if（this.value =='Your Hint Here'）this.style.color = #ccc'; 
 onKeyDown =if（this.value =='Your Hint Here'）{
 this.value =''; this.style.color ='＃000';}> 
  

您应该调整上述方法来使用JavaScript函数，不要重复提示字符串三

我也注意到，上的立即加入表单vark.com/rel =nofollow noreferrer> vark.com 还将光标位置设置为文本框的开头，而不是将其留在结尾。这可能有点棘手，使其工作的跨浏览器，但你可能想检查由下面的文章中提出的解决方案 Josh Stodola ：

• 在文本框或TextArea中使用JavaScript设置光标位置

I remember seeing a tutorial somewhere that talks of how to style your input forms in a more "usable" way.

Essentially, you have a placeholder value and when you enter the input, it hides the hint so to speak.

Now, just to be clear: I don't want the hint (placeholder value text) to disappear on focus, but rather to go lighter when I first start typing something. Good examples:

• Check out the forms on Aardvark. This is exactly how I wish to have my input forms.

• Our very own Stack Overflow — when you try to ask a question, on clicking inside any input form, it doesn't hide the text right away. You see your cursor as well as the hint. but when you start to type, it hides the hint. (I would prefer having it go to a much lighter shade rather than hiding all together though, like the above Aardvark example.)

I remember very clearly reading a tutorial somewhere on the interwebz with this exact requirement, but darn, I forgot to bookmark it.

Any suggestions/links?

[Update: I recently found a jQuery plugin In-Field Labels that does exactly what i want. Also, here's the link to an improvement of the same plugin. ]

解决方案

You may want to start from this:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }"> 

You should probably tweak the above to use JavaScript functions in such a way not to repeat your hint string three times, but I hope this can get you going in the right direction.

I also noticed that the "Join Now" forms at vark.com also set the cursor position to the start of the text box instead of leaving it at the end. This can be bit tricky to make it work cross-browser, but you may want to check the solution proposed in the following article by Josh Stodola:

• Setting Cursor Position in a Textbox or TextArea with Javascript

这篇关于如何在窗体中实现Stack Overflow类似水印？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！