如何在表单中实现类似Stack Overflow的水印？

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.

查看Aardvark上的表格。这正是我想要输入表单的方式。
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.)

我们自己的Stack Overflow - 当您尝试提问时,在任何输入表单内部单击时,它不会立即隐藏文本。您可以看到光标以及提示。但是当你开始输入时,它会隐藏提示。 (我更喜欢让它变得更浅,而不是隐藏在一起,就像上面的Aardvark例子一样。)

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

我记得非常清楚地在interwebz上的某个地方阅读了这个具有这个确切要求的教程,但是,我忘了给它添加书签。

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. ]

[更新:我最近发现了一个jQuery插件In-Field Labels,它完全符合我的要求。此外,这里是改进相同插件的链接。 ]

5 个解决方案

#1

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.

您应该调整上面的内容,以便以不会重复三次提示字符串的方式使用JavaScript函数,但我希望这可以让您朝着正确的方向前进。

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:

我还注意到vark.com上的“立即加入”表单也将光标位置设置为文本框的开头,而不是将其留在最后。这可能有点难以使其跨浏览器工作,但您可能想要检查Josh Stodola在以下文章中提出的解决方案:

Setting Cursor Position in a Textbox or TextArea with Javascript

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

#2

HTML5 has the placeholder attribute, which is designed for this very task.

HTML5具有占位符属性,该属性专为此任务而设计。

Only WebKit (the rendering engine used in Safari and Google Chrome) supports it so far though. You’ll want a JavaScript fallback like Daniel’s for when placeholder isn’t supported.

到目前为止,只有WebKit(Safari和谷歌浏览器中使用的渲染引擎)支持它。当不支持占位符时,你会想要像Daniel那样的JavaScript回退。

It’s trivial to check for placeholder support in JavaScript.

在JavaScript中检查占位符支持是微不足道的。

#3

An input field cannot have both default text and user-entered text at the same time. The only possible way to achieve exactly what you are asking is to have a background-image on the input fields with an image containing the default text you wanted to display but I highly recommend against this as two layers of text will be very confusing for the user. The most common way to achieve this (and what is done on your example site vark.com) is to use the focus method to clear out the text:

输入字段不能同时具有默认文本和用户输入的文本。唯一可能实现您要求的方法是在输入字段上使用包含您要显示的默认文本的图像的背景图像但我强烈建议不要这样做,因为两层文本对于用户。实现此目的的最常见方法(以及在示例站点vark.com上执行的操作)是使用焦点方法清除文本:

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

To achieve it the way * (and Vark.com's signup form) does you can use the same method with the keydown event:

为了实现它,*(和Vark.com的注册表单)的方式可以使用与keydown事件相同的方法:

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

To achieve both your color change on focus and text clear on keydown it would be:

为了实现焦点上的颜色变化和keydown上的文本清除,它将是:

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

#4

In response to @Paul's post, I noticed the behavior of the HTML5 placeholder acts strangely on my Android emulator. The placeholder looks great until you click on it and it becomes black with your cursor to the right of the word. Granted, if you type it will disappear, but it's not intuitive. So I wrote some jQuery to fix it (where's my HTML5/jQuery badge?)

为了回应@Paul的帖子,我注意到HTML5占位符的行为在我的Android模拟器上表现得很奇怪。占位符看起来很棒,直到您单击它并且它变为黑色,光标位于单词的右侧。当然,如果你输入它会消失,但它不直观。所以我写了一些jQuery来修复它(我的HTML5 / jQuery徽章在哪里?)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

#5

I wrote this example which I—for lack of a better name—called persistent placeholders.

我写了这个例子,因为我没有更好的名字 - 称为持久占位符。

It requires a little more markup, a div wrapping a label and input, but that solves a lot of other problems (like placeholders getting into your form data or password fields not working) and the actual markup is very clean to read. You end up with something like this:

它需要更多的标记,div包装标签和输入,但这解决了许多其他问题(如占位符进入您的表单数据或密码字段不工作)和实际标记是非常干净的阅读。你最终得到这样的东西:

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

and after including the CSS and JS, it just works.

在包含CSS和JS之后,它才有效。

#1