像tumblr这样的文本字段中的Javascript默认文本答案

【问题标题】：Javascript default text in textfield like tumblr像tumblr这样的文本字段中的Javascript默认文本
【发布时间】：2012-05-11 22:50:39
【问题描述】：

我希望输入字段中的默认文本为灰色。但是用户应该不能选择这个文本，而且它是不可删除的。

例子：

用户键入名称Susan。在他们停止输入后，它会显示为：SusanCartel。灰色部分自动显示为预览。然后当他们点击创建时，我们会看到SusanCartel。这样，人们就不会意外输入SusanCartelCartel，因为他们会看到预览。

【问题讨论】：

听起来你想要更多类似 Google Instant 使用的东西，在文本框内部显示自动完成结果。看看stackoverflow.com/questions/6336094/… 和stackoverflow.com/questions/5376956/make-part-of-inputtext-grey
@close voter - 这个问题甚至还不能与这个问题重复。
@Rory：链接有误，不过其他的可能适合...

【解决方案1】：

HTML5 具有您可以使用的新 placeholder 属性：

<label for="username">Username:</label>
<input type="text" name="username" id="username" placeholder="Type your username..." />

但是，这在 IE 或旧版浏览器中不起作用。

This plugin 将实现跨浏览器相同的效果。

【讨论】：

在我看来，OP 想要一些自动完成信息到输入框，比如 Google Instant，而不是一些静态文本。这个问题有点模糊。
实际上我想要这样的东西，如果用户点击文本框，那么在我们输入的内容之后，文本框中应该会自动出现一个单词“cartel”。 “卡特尔”一词不应是可选择、可编辑或可删除的。

【解决方案2】：

我通常使用 jquery-watermark。查看此plugin 链接了解更多信息。

用法：

$('#inputid').watermark('Required information', {className: 'myClassName'});

另外，如果你仔细阅读介绍，你会遇到这一点

原生支持 HTML5“占位符”功能（在浏览器中支持它），或者可以禁用本机支持，以便插件控制所有水印

【讨论】：