Tumblr's "data-ghostwriter"

本文关键字：quot data-ghostwriter Tumblr 更新时间：2023-09-26

在Tumblr的注册页面上，它有三个方框，一个用于密码，一个用于电子邮件，一个用于url。我感兴趣的是URL位。无论您键入什么，后面都跟着.tumblr.com。你不能把光标放在它后面，也不能高亮显示它，也不能删除它。它是怎么做到的?

我检查源，它具有属性data-ghostwriter=".tumblr.com"。我不认识它，所以我谷歌了一下，还是一无所获。我假设这是一个自定义属性，尽管这似乎是HTML会有规则反对的东西，但我在链接的javascript文件中找不到任何关于它的信息。

那么，两个问题。它们是如何做到的，您可以使用自定义HTML属性吗?

所以html5允许data-自定义属性和使用jsbeautifier，他们的输入代码是: http://pastebin.com/b5Yd51Mi

这是如何工作的，虽然，我还是有点困惑。

"data-"属性在HTML5中是明确允许的。任何东西都可以跟在"data-"后面(在HTML属性名的合理语法规则范围内的任何东西)。一般情况下，您可以使用HTML元素节点上的"getAttribute()"方法访问这些值。

现在，虽然所有这些都是真的，但tumblr为这些页面提供XHTML doctype有点可疑:-)

这个老问题描述了效果是如何实现的。它们将一个半透明的框放置在输入字段的正上方。当你开始打字，他们使框可见，并填充它与两个<span>元素:第一个，你已经键入的内容的副本，样式为黑暗的文本在真正的输入字段，和第二个，与静态的"。tumblr.com"后缀，样式为浅灰色和"鬼"。